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.
Banner example of Cookie Consent.
Controlled example of Cookie Consent.
A copy-to-clipboard button with a morphing check icon, an optional label, a fallback for blocked clipboards, an error state and a polite announcement.
Icon, label and variants example of Copy Button.
Inline with a value example of Copy Button.
An SSR-safe timer with controlled or local seconds, pause support, and a completion announcement.
Overview example of Countdown.
States and variants example of Countdown.
A closing call-to-action panel: large heading, one line of reassurance and two buttons, over a softly lit animated grid.
Default example of CTA 1: framed call to action.
A waitlist or newsletter signup over rising light beams: heading, email field with validation, loading, success and error states.
Default example of CTA 2: waitlist over light beams.
A closing call-to-action for developer products: heading, two buttons and a copyable install command with package-manager tabs, over a soft dotted glow.
Custom command example of CTA 3: install command.
Default example of CTA 3: install command.
A locale-aware money field that formats on blur while keeping editing and caret behavior simple.
Overview example of Currency Input.
States and variants example of Currency Input.
A sales dashboard page: a date-range switch that recomputes everything, four KPI cards with change and trend, a revenue area chart against the previous period, revenue by channel and a recent-orders table.
Default example of Dashboard 1: sales overview.
Seven days, your data example of Dashboard 1: sales overview.
A web analytics page: a live-now pill, date range and compare switch, a visitors line chart against the previous period, traffic sources as a donut, devices, top countries and a top-pages table.
Compact, no live pill example of Dashboard 2: traffic analytics.
Default example of Dashboard 2: traffic analytics.
A complete data grid on TanStack Table: sortable headers, search, column visibility, row selection, pagination, a loading state and live result counts.
Invoices example of Data Table.
Loading and empty example of Data Table.
A button that opens a calendar popover to choose one date, with presets, month and year selects, min and max dates, clearing, invalid state and form submission.
Birthday, invalid, disabled example of Date Picker.
Delivery date with presets example of Date Picker.
Two native date controls with inclusive range correction and quick-select presets.
Overview example of Date Range Picker.
States and variants example of Date Range Picker.
A semantic key-value surface with responsive split and stacked layouts.
Overview example of Description List.
States and variants example of Description List.
A macOS desktop of icons: box-select with the pointer, drag to move with snapping to grid cells, double-click or Return to open, arrow keys to move focus and Alt plus arrows to move an icon.
Desktop on a wallpaper example of Desktop Icons.
Icons behind windows example of Desktop Icons.
A lineup of laptop, tablet, phone and watch frames with their own token-drawn screens, scaled as one picture. Buttons underneath bring a device forward and dim the rest.
Default example of Devices 1: Mac, iPad, iPhone and Watch lineup.
Your own screens example of Devices 1: Mac, iPad, iPhone and Watch lineup.
A Radix modal dialog with a blurred overlay, centered card surface that fits 360 px screens, header and footer parts, optional close button and animations.
Confirm example of Dialog.
Edit profile example of Dialog.
A line-by-line text diff with change counts, line numbers, and accessible change labels.
Overview example of Diff Viewer.
States and variants example of Diff Viewer.