Accessible React and Tailwind CSS v4 components, blocks, templates, charts and themes for shadcn/ui, with keyboard, screen reader, reduced motion and dark mode support on every item, and an MCP server for AI coding agents.
Pagination with page info on left, built from the pagination component.
A passport expiry date checked against the travel date: it must be valid for the required months after the trip, and the field says the exact date it needed to pass. Use this when a destination requires the passport to be valid for months beyond the trip.
A password field that warns when Caps Lock is on, read from key events, announced politely, linked to the field and gone on blur or when the key is toggled off.
A password field with a visibility toggle and a four-step strength guide that explains how to improve the entry.
Example of Password Input.
The keyboard-navigable grid of month, year and quarter cells behind the period pickers.
A bottom sheet that explains why you need a permission before the browser asks, with Allow and Not now buttons, and remembers a refusal so it does not nag. Use this when you need notifications, location or the camera and a cold browser prompt would be refused.
A right-to-left Persian (Solar Hijri) date picker with Persian month names and digits, a Saturday week start, Nowruz marked and an ISO value. Use this when your app serves Persian-speaking users who expect their own calendar, direction and week.
A modern phone drawn in CSS with a titanium band, side buttons, Dynamic Island, status bar and home indicator. Children render as the screen, laid out at phone resolution and scaled to fit.
Example of Phone Frame.
A thumbnail grid whose items open a full-screen viewer at the tapped photo, and return focus to that thumbnail when the viewer closes. Use this when a phone gallery, album or post shows photos in a grid and people expect to open, swipe and pinch them.
A select for touch screens: a button that shows the choice and opens a bottom sheet with large rows, optional search and single or multiple selection.
Example of Picker Sheet.
A transfer list where the order of the chosen items matters, reordered by drag, by four order buttons or with Alt and the arrow keys.
Example of the pick list.
A zoom and pan container for maps, diagrams and photos: pinch, double tap, Ctrl or Cmd plus wheel, drag, +/-/0 keys and on-screen buttons, with bounds so content never leaves the box.
Example of Pinch Zoom.
A small confirmation anchored to the control that opened it, with a title, a consequence line and Yes/No actions that stay busy while an async confirm runs.
Example of Popconfirm.
A publish button whose popconfirm lists what is missing (title, image alt text, summary) and offers Publish anyway only when there are warnings.
A sign-out-of-all-devices button that names how many sessions will end, then confirms with a success flag instead of a page reload.
Example of Popover.
Popovers opening from different sides, built from the popover component.
Use this when press coverage is shown as swipeable quote cards: a no-library scroll-snap row where each card is one link to the article and Tab brings the focused card into view.
Progress bar with custom colors, built from the progress component.
Example of Progress.
Promise toast with loading state, built from the sonner component.
A chat composer with an auto-growing textarea, file attachments and a send button that turns into Stop while a reply streams.
Example of Prompt Input.
A news feed that refreshes on pull or on the Refresh button, prepends new items with a "2 new stories" announcement and keeps the reading position when nothing changed. Use this when a phone feed has fresh content on a server and people expect to pull to update it.
A scroll area you pull down from the top to reload, with a resisting indicator, a live-region status and an always-reachable Refresh button for keyboard and mouse.
Example of Pull To Refresh.
Example of Radio Group.
Radio group with legend and description, built from the radio group component.
Range calendar, built from the calendar component.
A collapsible panel for a model's reasoning that opens while it thinks and collapses to "Thought for 12s" when done.
Example of Reasoning Disclosure.
A date field that writes the date back as today, tomorrow, in 3 days, last Friday or 2 weeks ago in the viewer's language, picking the unit that reads best. Use this when a date should be read at a glance as how far away it is, not only as a number.
A resend-the-code button that disables itself for a countdown after each press, says how long is left in words, and re-enables itself, with a limit on how many times it can be used. Use this when resending is rate limited.
Example of Resizable.
A thin bar that shows how far down the page the reader is.
Example showing animated scroll progress for your pages.
A search input with a leading icon, a clear button and an Enter-to-search callback.
Example of Search Field.
A grouped list with sticky section headings and an alphabet index that jumps on tap or drag, announces the letter and works with a keyboard.
Example of Section List.
A single-select toggle with a sliding indicator.
Example of Segmented Control.