Component Library
Polished. Accessible. Keyboard-navigable. Conversation UI, agentic primitives, sidebars, dialogs — all included, all composable.
The problem
Custom components reinvent forms, dialogs, accessibility. Every time.
Every team writes their own select, dialog, dropdown, and tooltip — badly. Focus management is hard. Keyboard navigation is hard. Screen-reader semantics are hard. Most custom components fail accessibility audits and feel janky to power users.
The teams that use a real component library save the time. The teams that don't spend the year and ship something worse.
How it works
Radix UI primitives + Tailwind + composable agentic UI components.
Cerebe Blueprint ships with Radix UI primitives for the hard parts — focus traps, ARIA roles, keyboard event handling, scroll containment. Tailwind handles styling with utility classes mapped to the brand design tokens.
On top of Radix, Cerebe Blueprint ships agentic UI primitives: a chat thread component with streaming, a message bubble that opens its trace in Grafana on click, a composer with attachment + voice support, a tool-call card for visualizing agent actions, and a contextual AI sidebar pattern that fits every page.
- Radix UI for focus management, ARIA, keyboard nav — the parts that are hardest to get right
- Tailwind for styling — utility-first, design tokens from the brand system
- Pre-built agentic primitives: ChatThread, MessageBubble, ComposerInput, ToolCallCard
- Sidebar + contextual AI panel patterns — keyboard shortcuts, persistent state
- Theming hooks for tenant-specific brand voice + colors (WorldviewPack-compatible)
- Storybook + visual regression tests scaffold-installed; no design-system rot
// web/components/conversation/ChatThread.tsx — example agentic UI primitive
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useConversation } from "@/hooks/use-conversation";
import { MessageBubble } from "./MessageBubble";
import { ComposerInput } from "./ComposerInput";
export function ChatThread({ sessionId }: { sessionId: string }) {
const { messages, send, streaming } = useConversation(sessionId);
return (
<div className="flex h-full flex-col">
<ScrollArea.Root className="flex-1 overflow-hidden">
<ScrollArea.Viewport className="h-full w-full">
{messages.map((m) => (
<MessageBubble
key={m.id}
role={m.role}
content={m.content}
traceId={m.traceId} // click to open trace in Grafana
/>
))}
</ScrollArea.Viewport>
<ScrollArea.Scrollbar orientation="vertical" />
</ScrollArea.Root>
<ComposerInput onSubmit={send} disabled={streaming} />
</div>
);
}
// All components are keyboard-navigable, screen-reader friendly,
// and use Radix primitives for focus management + ARIA semantics.Get Started
Stop reinventing forms and dialogs.
Radix + Tailwind + agentic UI primitives, all keyboard-navigable and screen-reader friendly. The polish that takes a year to get right — already done.