coss ui

Short verdict: coss ui gives React teams 56 accessible components built on Base UI and styled with Tailwind CSS 4, free to copy into a project and edit. Its 13 October 2026 update added Chat UI: conversation components with replies, reactions, mentions, read receipts and designed failure states. Both installed in our Next.js test and passed a production build, though the recommended setup rendered everything in a monospace font until we changed one class. It suits product teams building app interfaces, especially ones with messaging or comments. Skip it if you need landing-page sections or a chat backend; neither is included.

How we reviewed it: On 25 October 2026 we set up a new Next.js 16 app with the documented npx shadcn@latest init @coss/style command (shadcn CLI 4.22.1), added the chat family, built a test page from the docs' examples and ran a production build. We used the Chat UI showcase on a 1,440 px desktop and a 390 px touch screen while logging network requests, and ran Lighthouse 12.8.2 once on three coss.com pages. We did not try other frameworks or connect the chat to a real backend. Counts, dates and license terms come from the coss ui docs, its registry and its GitHub repository on the same day.

What coss ui includes

What we found

Chat UI, added on 13 October 2026

The new Chat UI is a family of components for conversations in a drawer, a side panel or a full page. npx shadcn@latest add @coss/chat copied 23 files into our project, from message bubbles and a scroll controller that follows new messages to reaction chips, quoted replies, typing and delivery indicators, member lists and state screens. It pairs with Composer, a message input added a day earlier that grows with the draft, keeps its send button in view and supports @ mentions and, per its docs, slash commands.

In the showcase we sent a direct message with an @ mention, and a scripted reply quoting it arrived a few seconds later. The full demo opens a group chat in a drawer. There we added a reaction (six to choose from), replied to a message, which lifts it above the composer and dims the rest of the timeline, and opened Message info, a nested drawer listing who has read our message. Each message's menu offers Copy text, Pin message, Message info and Delete message, and 14 scenario buttons open the drawer in other states, from a pinned message or several people typing to a ban or a failed delivery with a working Retry.

None of it left the browser: we logged no write requests and found nothing in localStorage, which matches the docs' note that the showcase "does not persist or transmit messages". At 390 px the drawer becomes a full-height bottom sheet, the reply and reaction buttons stay visible without hover, and nothing scrolled sideways. One rough edge: after a focused reply, our sent message stayed half below the fold while a "1 new message" button pointed to the scripted answer. Plain messages scrolled into view as expected.

Failure states are designed too

A second showcase section switches the same conversation between Loading, Empty, Reconnecting, Error and No access. The docs go further, with a table of nine states, what each shows and how the user recovers: not joined, joined but empty, loading, disconnected, history error, access lost, removed, banned and left.

Setup takes one command and one font fix

The documented npx shadcn@latest init @coss/style, with the Next.js template, created the project, installed all 56 components, the color tokens and the Inter and Geist Mono fonts, and finished in 79 seconds with an empty npm cache. Type checking and next build passed. But the generated app/layout.tsx put font-mono on the <html> element, and globals.css applied both font classes to it, so every button, select and message rendered in Geist Mono. Changing that class to font-sans fixed it.

Adding the chat family took 11 seconds. It also moved Base UI from 1.9.0 back to 1.8.0 for the whole project, because the chat registry item still pins 1.8.0. Type checking and the build passed on both versions, but registry items can disagree on versions.

Components follow Base UI, not Radix

The docs' usage examples for Select, Number Field and Dialog worked: the select took a value, the number field stepped to 3 after three clicks, and the dialog moved focus inside and closed on Escape. Parts compose through Base UI's render prop rather than Radix's asChild, and a migration guide covers the switch component by component. Theming uses the same CSS variables as shadcn/ui, per the docs, plus info, success and warning tokens.

Particles are examples, not page sections

The 529 particles are prebuilt variations in 55 groups: 40 button examples, 28 input groups and 25 calendars, plus an authentication card, a password field with a strength meter and a profile form that switches from dialog to drawer on mobile. There are no hero, pricing or dashboard sections, so a marketing site still needs a block library.

Docs written for people and coding agents

Docs pages have Markdown versions and an llms.txt map, and npx skills add cosscom/ui installs coss guidance into AI coding assistants. The changelog is practical: 11 of its 12 dated entries since March 2026 include a prompt an agent can follow to migrate your code, and recent ones add the CLI command to update, as when Segmented Control became a component on 20 October 2026. The counts drift, though: the skills note says 53 primitives, the roadmap 50+, the registry 56, and llms.txt leaves out Composer and Segmented Control.

Performance: your bundle and the coss.com site

Your bundle depends on what you import, so we measured our own production build (Next.js 16.4.2), JavaScript per page after gzip:

The four components added about 79 KB over a blank page, and the chat another 54 KB. Lighthouse measures something else: coss.com's own documentation site. One run per page, 25 October 2026:

The weak mobile performance comes from the site itself: each page loads about 620 to 680 KB of JavaScript and 337 KB of fonts, and the Chat UI page's largest contentful paint took 6.7 s on mobile.

What you still have to build

• The chat backend. Chat UI only presents conversations. Message storage, real-time delivery, read receipts, typing events, membership and server-side permission checks are yours; the docs list them as the application's job.

• History loading. Per the docs, the scroll hook does not fetch, paginate or virtualize older messages.

• Attachments. The chat family has no attachment component, so uploads and previews are yours to build.

• Page sections. Heroes, pricing tables and dashboard layouts are not part of coss ui.

• Copy and translations. Labels, empty-state text and timestamp formats come from your app.

Pros and cons

Pros

• Chat UI covers replies, reactions, mentions, receipts, typing and nine membership and connection states, in source you own.

• One command set up all 56 components in a fresh Next.js app, and the result type-checked and built.

• Accessibility holds up: 100 in Lighthouse on every page we tested, the dialog moved focus and closed on Escape, and Reply moved focus to the composer.

• Active maintenance: 43 commits in 30 days and a dated changelog with migration notes.

Cons

• The recommended setup rendered everything in Geist Mono until we fixed one class.

• Registry items pin different Base UI versions; adding chat moved our project from 1.9.0 back to 1.8.0.

• The mixed licensing (AGPL-3.0 by default, MIT for apps/ui) needs a careful read, and apps/ui has no license file of its own.

• Particles are component variations; there are no page sections or templates.

• Chat UI has no backend or hosted service.

How coss ui compares

• shadcn/ui is free and MIT-licensed, and its CLI (4.22.1) can set projects up on Base UI or Radix. Its chat pieces (Bubble, Message and Message Scroller) handle layout; reactions, replies, mentions, receipts and failure states are left to you. Pick it if you want shadcn's own defaults and only need basic chat layout.

• Base UI (MIT, version 1.9.0) is the unstyled layer underneath coss ui. Pick it if you are building your own design system and want to style every primitive yourself.

• ReUI lists 1,264 free shadcn/ui components and 669 Pro blocks, with paid plans from $249 one-time. Pick it if you want ready-made blocks next to your components.

See all Tailwind component libraries for more options.

Who should use coss ui

Use it if you build a React app with Tailwind CSS 4 and want accessible components whose source you own, especially if the product needs in-app messaging or comments, where Chat UI already designs the reply, reaction and failure states. Teams moving from shadcn/ui on Radix should budget time for the render prop changes. Look elsewhere if you need landing-page sections, a stack other than React, or a chat service with its own backend.

FAQ

Is coss ui free for commercial and client projects?

Yes. The components come from the repository's apps/ui folder, which its LICENSING.md file lists under MIT. The rest of the repository defaults to AGPL-3.0, the license GitHub displays, so point your legal review at LICENSING.md.

Is coss ui the same as Origin UI?

It is Origin UI's successor. Cal.com acquired Origin UI and rebuilt it on Base UI; originui.com now redirects to coss.com/ui, and the original collection is still online at coss.com/origin.

Does coss ui Chat UI include a chat backend?

No. Chat UI renders conversations and handles local interaction; your app supplies messages, real-time delivery, read receipts, persistence and permissions. The showcase runs on local state and timers and sent no network requests in our test.

Can I use coss ui with Vite or Astro?

We only tested Next.js. coss ui needs React and Tailwind CSS 4 and installs through the shadcn CLI, whose init command also offers Vite, React Router, Laravel and Astro templates.