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.
A stack of endpoints example of API Endpoint.
Create a customer example of API Endpoint.
Displays a secret such as an API key, masked by default (sk-live-••••••••a1b2), with a reveal toggle, a copy button that copies the full key, and an optional regenerate action.
Default example of API Key Field.
A human-in-the-loop confirmation for agent actions: what will happen, risk level in words, the exact command, Approve, Deny and Always allow, a timeout countdown and a recorded decision.
Shell command example of Approval Card.
Three risk levels example of Approval Card.
The frame of an application page: skip link, sticky header, sidebar that becomes a sheet on small screens, main area, optional aside and footer.
A product frame: workspace switcher, grouped navigation with badges that collapses to an icon rail, top bar with search, notifications and a ⌘K command menu, and a scrolling page slot. A drawer on phones.
Collapsed, custom pages example of App Shell 1: collapsible sidebar with command menu.
Default example of App Shell 1: collapsible sidebar with command menu.
Compact shell example of App Shell.
Dashboard frame example of App Shell.
A side panel for things an assistant generates: Preview and Code tabs, version stepping, copy and download, a streaming state and a close button, with the rendered result in your own slot.
Component with code example of Artifact Panel.
Writing and versions example of Artifact Panel.
A CSS-native ratio frame that reserves space for media and safely handles invalid ratio values.
Overview example of Aspect Ratio.
States and variants example of Aspect Ratio.
A dense, quiet six-page admin for an online store: a dashboard with a live date range, sortable orders with bulk actions, an order page with a refund flow, products, customers and settings.
Customers example of Atlas: store admin.
Dashboard example of Atlas: store admin.
Order example of Atlas: store admin.
Orders example of Atlas: store admin.
Products example of Atlas: store admin.
Settings example of Atlas: store admin.
A podcast-style audio player: play and pause, skip back and forward, a scrubber with chapter ticks, a named current chapter and a speed control. Works with a real file or as a silent demo.
Compact mini player example of Audio Player.
Episode with chapters example of Audio Player.
Soft, slowly drifting aurora light made of blurred token-colored glows with fine vertical curtains and an optional radial fade. Pure CSS layers, paused off-screen, still under reduced motion.
Hero example of Aurora Background.
Warm, no curtains example of Aurora Background.
Seven auth pages in three switchable layouts (centered, split with art, frosted glass): sign in, sign up with a live password checklist, six-digit verification, forgot and reset password, team invite and a three-step onboarding.
Forgot example of Auth Kit: complete sign-in flow.
Invite example of Auth Kit: complete sign-in flow.
Onboarding example of Auth Kit: complete sign-in flow.
Playground example of Auth Kit: complete sign-in flow.
Reset example of Auth Kit: complete sign-in flow.
Sign in example of Auth Kit: complete sign-in flow.
Sign up example of Auth Kit: complete sign-in flow.
Verify example of Auth Kit: complete sign-in flow.
A Radix avatar with image and initials fallback, three sizes, an optional presence dot, and AvatarGroup for overlapping stacks with a +N overflow counter.
Overlapping avatars that spread on hover, lift individually with a name and role tooltip, show presence, fall back to initials and end in a +N count that can be a button.
Sizes and overflow button example of Avatar Circles.
Team with presence example of Avatar Circles.
Default example of Avatar.
Group example of Avatar.
An accessible compact row of people with initials, image support, and an overflow count.