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.
An account settings page: profile with username availability, sign-in details with a change-password dialog, language, time zone and appearance, a type-to-confirm delete, and a sticky save bar that appears only when something changed.
Default example of Settings 1: profile and account.
Failing save example of Settings 1: profile and account.
Notification settings that save as you go: digest frequency as radio cards, a grid of switches for each event and channel (cards on phones), and quiet hours with times and weekdays.
Default example of Settings 2: notification preferences.
Your events example of Settings 2: notification preferences.
Team management: a seats meter, an invite form with role, role filters and search, a member list with role selects, pending invitations and a confirm-before-remove dialog. Stacks cleanly on phones.
Default example of Settings 3: team members and roles.
Seats full example of Settings 3: team members and roles.
A sectioned settings card with label-and-control rows and a save bar that slides in when something changes, with a status announced to screen readers.
Unsaved changes example of Settings Panel.
Workspace settings example of Settings Panel.
A modal panel that slides from any edge, with header, scrollable body and footer parts, a grab handle on bottom sheets, and safe-area padding.
A macOS sheet: a frosted panel that drops from the top edge of its window and dims only that window, with a default accent button, on Radix Dialog for focus trapping and Escape to cancel.
Form sheet in a window example of Sheet Dialog.
Save changes sheet example of Sheet Dialog.
Edit project example of Sheet.
Four edges example of Sheet.
Text with a band of light sweeping across it, from muted to full foreground color. Suited to AI "thinking" and loading status lines; static under reduced motion.
Thinking status example of Shimmer Text.
A button with a diagonal band of light that sweeps across on hover and focus, or on a timer to draw the eye, built on the Ballmac button.
Hover and loop example of Shiny Button.
On every variant example of Shiny Button.
A compact accessible keycap sequence paired with the action it performs.
Overview example of Shortcut Hint.
States and variants example of Shortcut Hint.
A working Mac desktop for your landing page: wallpaper, a menu bar with menus and a clock, draggable and resizable windows, desktop widgets and a magnifying dock that launches and relaunches them.
Default example of Showcase 1: interactive Mac desktop.
Your own app window example of Showcase 1: interactive Mac desktop.
An app sidebar with icon-rail collapse, floating and inset variants, grouped menus with badges and sub-items, a mobile sheet, tooltips when collapsed and a Cmd/Ctrl+B shortcut.
Icon rail example of Sidebar.
Workspace navigation example of Sidebar.
A responsive pointer signature surface with a full keyboard-accessible typed alternative and undo.
Overview example of Signature Pad.
States and variants example of Signature Pad.
A signup page: validated name, work email and password with a live strength guide, terms checkbox, SSO option and a check-your-inbox confirmation, beside a benefits list with social proof.
Default example of Signup 1: form with benefits column.
No SSO, no pitch example of Signup 1: form with benefits column.
A theme-aware loading placeholder with an animation that stops when reduced motion is requested.
Overview example of Skeleton.
States and variants example of Skeleton.
A single or range slider with a name per thumb, a live value bubble, vertical orientation and full keyboard control, built on Radix.
A two-thumb Radix slider with a labeled value span, keyboard operation, and minimum thumb spacing.
Overview example of Slider Range.
States and variants example of Slider Range.
Vertical and disabled example of Slider.
Volume and price example of Slider.
A custom cursor for one area that glides after the pointer on a spring, leans into the direction of travel, shrinks on press and grows a label over elements marked with data-cursor-label.