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.
Empty example of Notification Center.
Inbox example of Notification Center.
macOS Notification Center cards: collapsed, the newest sits in front with two peeking behind; click or press Enter to spring the stack open. New cards slide in from the top; each can be dismissed.
Notification Center example of Notification Stack.
A bounded numeric field with native spinbutton semantics, step buttons, and controlled or uncontrolled state.
Overview example of Number Input.
States and variants example of Number Input.
Counts up to a number when it scrolls into view, with locale-aware formatting for currency, percentages and decimals.
Currency example of Number Ticker.
Default example of Number Ticker.
A confident blue brand colour on cool, lightly tinted greys with soft corners.
A four-step setup wizard with a progress rail: name and address a workspace (auto-filled), pick goals as cards, invite teammates as removable chips, review, then a finish screen. Slides between steps.
Custom goals example of Onboarding 1: workspace setup wizard.
Default example of Onboarding 1: workspace setup wizard.
A get-started checklist with a progress ring and segmented bar, expandable steps with actions, checkable tasks and a short celebration when everything is done.
Complete and dismissible example of Onboarding Checklist.
Setup steps example of Onboarding Checklist.
A dark, four-page site for an AI agent platform: a hero that plays a live agent run, tools, an eval chart, traces, security, pricing with a usage calculator, a changelog and sign-in.
Changelog example of Orbit: AI agent platform.
Home example of Orbit: AI agent platform.
Pricing example of Orbit: AI agent platform.
Sign in example of Orbit: AI agent platform.
Items that orbit a center on circular tracks while staying upright. Evenly spaced, any radius, speed and direction; stack several for rings. Paused off-screen, static under reduced motion.
Integrations example of Orbiting Circles.
Single ring example of Orbiting Circles.
An npm-style package card or inline pill with version, weekly downloads and sparkline, size, license, TypeScript and module formats, and a one-click install command.
Card with stats example of Package Badge.
Inline pills example of Package Badge.
A semantic page navigation set with current-page feedback, generous targets, and small-screen labels.
Overview example of Pagination.
States and variants example of Pagination.
A five-app productivity suite in one shell: a Today page with agenda, tasks and a focus timer, plus a full mail client, week calendar, drag-and-drop board and settings. A tab bar on phones.
Board example of Parcel: productivity workspace.
Calendar example of Parcel: productivity workspace.
Mail example of Parcel: productivity workspace.
Settings example of Parcel: productivity workspace.
Today example of Parcel: productivity workspace.
A canvas field of softly twinkling particles with depth, gentle drift and a pointer that attracts or repels them. Token colors, DPR aware, pauses off-screen, still under reduced motion.
Hero card example of Particles.
Rising, repel example of Particles.
A password field with a visibility toggle and a four-step strength guide that explains how to improve the entry.
Overview example of Password Input.
States and variants example of Password Input.
A modern phone drawn in CSS: titanium band, side buttons, Dynamic Island, status bar and home indicator. Children render as the screen, laid out at a phone resolution and scaled to fit.
Black, dark screen example of Phone Frame.
Wallet app example of Phone Frame.
A native dialing-code selector paired with a telephone field that preserves the user’s formatting.
Overview example of Phone Input.