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.
Example of Login 03.
A login page with a form and a side panel.
Example of Login 04.
A simple email-only login page.
Example of Login 05.
Decorative SVG icons for desktop mockups, including folders, files with an extension badge, drives and rounded app tiles.
Example of Mac Icons.
A desktop-style window frame with traffic-light controls, a title bar, an optional toolbar and a translucent sidebar.
Example of Mac Window.
An infinite scrolling component that can be used to display text, images, or videos.
Example showing a 3D infinite scrolling component.
Example showing an infinite scrolling component.
Example showing an infinite scrolling logo carousel.
Example showing a vertical infinite scrolling component.
A picture slot that reserves its space, lazy-loads, takes a URL, an image with alt text and a dark-mode file, or your own element, and falls back to artwork when there is no image or it fails.
Example of Media.
A data-driven header menu with wide panels of grouped, described links, an optional featured card, and an accordion list for small screens.
Example of Mega Menu.
A desktop-style menu bar built on Radix Menubar, with menus, submenus, checkbox items, shortcuts, status icons and a clock.
Example of Menubar.
Example of Menu Bar.
Menubar with checkbox & radio items, built from the menubar component.
A Recent menu built from a changing list that never shows empty: one disabled line explains an empty history and Clear recent sits apart and disables itself.
Example of Message.
One bar split into labelled parts against a total, with a legend that carries the numbers, for storage, budgets and quotas.
Example of Meter Group.
A storage or quota card that splits usage into categories, turns to a warning near the limit and offers the upgrade action only when it matters.
A searchable model selector grouped by provider, with capability icons, locked models and a detail pane showing context window, cost and capabilities.
Example of Model Picker.
A year-at-a-glance grid of twelve months with year paging and min, max and unavailable months, giving a YYYY-MM value.
Example of Month Picker.
A text input that uses the browser's own datalist for suggestions, so there is no popup to build, mobile keyboards show their native picker, and free text is always allowed. Use this when a light suggestion list is enough.
Example of Native Select.
Example of Navigation Menu.
Navigation menu with icons, built from the navigation menu component.
No notifications empty state, built from the empty component.
No products empty state with stacked cards and blur effect, built from the empty component.
Notifications dropdown with items, built from the dropdown menu component.
Counts up or down to a target number when it scrolls into view.
Example showing animated counting decimal numbers.
Example showing animated counting numbers.
Example showing animated counting numbers.
A getting started checklist with a progress ring, a segmented progress bar, expandable steps with an action button and a completion state.
A transfer list that shows each move immediately, saves in the background, ignores slow older responses and reverts with an error and Retry when a save fails. Use this when the lists live on a server and the interface must stay responsive.
A one-time code split into readable groups such as 123 456 that is still one input, with pasted 123-456 stripped to digits.
OTP input for PIN codes, built from the input otp component.
Example of Pagination.
Pagination with arrows buttons, built from the pagination component.