Accessible React and Tailwind v4 components, blocks and templates with native-app motion, built-in keyboard, RTL and translation support, and an MCP server for AI agents.
Vertically stacked disclosure sections on Radix Accordion, single or multiple open, with hairline dividers, a rotating plus and height animation.
Default example of Accordion.
Multiple open example of Accordion.
A compact actor and action feed with timestamps and an empty state.
Overview example of Activity Feed.
States and variants example of Activity Feed.
A live task plan for agents: a vertical timeline with pending, running, done, failed and skipped steps, nested substeps, expandable output, segmented progress and retry on failure.
Failure with retry example of Agent Plan.
Plan that runs example of Agent Plan.
The layout for a chat UI: a message log that sticks to the bottom while replies stream unless the reader scrolls up, a jump-to-latest button, an empty state with suggestions and a footer.
A complete assistant screen: collapsible conversation sidebar, model picker, messages with reasoning and tool calls, streaming replies, copy and regenerate, and a prompt with attachments.
Default example of AI Chat 1: full chat app pane.
A chat that builds things: conversation list, streaming replies, suggestion chips and a side panel with Preview and Code tabs, version history, copy and download. The panel overlays the chat on narrow screens.
Default example of AI Chat 2: conversation with artifact panel.
Your own artifact example of AI Chat 2: conversation with artifact panel.
Default example of AI Chat.
Empty state with suggestions example of AI Chat.
A chat message with user, assistant and system roles: right-aligned user bubbles, full-width assistant prose, an avatar slot, hover-revealed actions and a hydration-safe timestamp.
Default example of AI Message.
With actions example of AI Message.
A glass orb of drifting theme-colored light that shows whether the assistant is idle, listening, thinking or speaking, and swells with a live voice level.
Four states example of AI Orb.
Reacting to voice level example of AI Orb.
A semantic callout with five theme-aware tones, clear icon placement, an action row, and opt-in urgent announcements.
Focus-managed confirmation for consequential actions, with a clear cancel path, optional media, and a token-based destructive action.
Confirmation styles example of Alert Dialog.
Remove a project example of Alert Dialog.
Overview example of Alert.
States and variants example of Alert.
Near-black buttons with amber focus rings and charts on warm paper-tinted greys.
A modern Android phone drawn in CSS: satin frame in porcelain, obsidian or sage, centered punch-hole camera, Material-style status bar and gesture or three-button navigation. Children render at phone resolution, scaled to fit.
Home screen example of Android Frame.
Three-button navigation example of Android Frame.
An SVG beam that connects two elements with a curved path and sends a glowing gradient pulse along it. Follows layout changes, pauses off-screen, static under reduced motion.
Agent integrations example of Animated Beam.
Two-way sync example of Animated Beam.
A decorative hairline grid background where a few random cells softly light up and fade, like instrument lights. SVG, hydration-safe, static under reduced motion.
Hero background example of Animated Grid.
A live feed where new items spring in at the top and the rest glide down, with leave animations, an item cap, an optional fading tail and a polite announcement for new entries.
Capped activity log example of Animated List.
Live notification feed example of Animated List.
A number whose digits roll like an odometer to the new value, with locale and Intl formatting for currency, percent and compact notation, and widths that animate as digits come and go.
Currency, percent, compact example of Animated Number Flow.
Price with plan toggle example of Animated Number Flow.
Radix Tabs with a pill or underline indicator that slides between triggers on a spring, and panels that fade in. Keeps full keyboard support and ARIA; controlled or uncontrolled.
Pill with icons example of Animated Tabs.
Underline example of Animated Tabs.
An endpoint reference card: method and path with highlighted parameters, auth, grouped parameter lists, and request and response examples in tabs with copy.