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 Carousel ARIA.
A drag-and-fling row of cards that glides with momentum and stops anywhere, with edge fades, scroll buttons and a progress bar.
Example of Carousel Free Scroll.
The parts every tealmac carousel is built from: a labelled carousel region, viewport, numbered slides, arrows, dots, a counter and the hooks to drive effects, on Embla.
Example of Carousel Kit.
A responsive carousel with one slide and a peek of the next on phones, two or three per view on wider containers, paged dots and a "Showing 1-2 of 6" readout.
Example of Carousel Peek.
A centred looping carousel where the middle slide is full size and the slides beside it shrink as they move.
Example of Carousel Scale.
A carousel with no carousel library: a native scroll-snap row with buttons that scroll by a page and a position readout.
Example of Carousel Snap.
A multi-level combobox with drill-down, column and tree modes, breadcrumbs, search, async levels and a virtualized list.
Use this when a list is filtered by one category at a time: a free-scroll row of chips with a pressed state, the chosen chip scrolled into view and a polite "12 results" message.
A release notes feed with a date and version column, one card per release, change type labels, filter chips and a show more toggle for long releases.
Example of Changelog Feed.
Example of Chart.
Example of Checkbox.
Checkbox group, built from the checkbox component.
Checkbox with label and description, built from the checkbox component.
An inline source marker for AI answers, shown as a numbered chip or a site pill, that opens a preview card with the title, excerpt and link on hover or focus.
Example of Citation.
A lazily loaded storage tree with a collapse-all button, a loaded-items count and per-folder retry. Use this when people browse remote storage where each folder is a request that can be slow or fail.
A code panel with a filename header, line numbers, line highlights, wrap toggle and copy button, plus a tabbed variant for several files.
Example of Code Block.
The Advanced options disclosure at the foot of a form that says how many hidden settings were changed and can start open to reveal an error.
Collapsible animated card, built from the collapsible component.
Example of Collapsible.
Example of Command.
Command with shortcuts, built from the command component.
An extended Compose button that shrinks to an icon while the list scrolls down and grows back on the way up, always keeping its name for screen readers. Use this when a phone list screen has one dominant create action that should stay reachable without covering the content.
Delete without a dialog and make it safe with an announced Undo bar: the item goes at once and the delete is committed only after the undo window passes.
An alert dialog whose destructive button unlocks after a countdown that restarts each time it opens; use this when a rushed click is the main risk.
A contact list grouped by first letter with sticky headings, an edge index that jumps on tap or drag, and a count in each section. Use this when a phone screen lists more than about 30 people or items that people find by name.
Example of Context Menu.
Context menu with icons for common actions, built from the context menu component.
A read-only input for values people need to copy (links, IDs, commands) with a Copy button that confirms in text and aria-live, selects everything on focus, and falls back when the clipboard is blocked. Use this when the value is for pasting elsewhere.
A button that copies text to the clipboard and briefly shows a check mark.
Example of Copy Button.
A dashboard with a sidebar, summary cards, an interactive area chart and a sortable data table.
Example of Dashboard 01.
Example of Data Table.
A segmented date input: day, month and year are separate spinbuttons in the order of the locale, typed or stepped with the keyboard, with an ISO date value.
Example of Date Field.
An activity feed grouped under Today, Yesterday and dated headings with sticky headings, relative times and an index that jumps between days. Use this when a phone shows a history ordered by time, such as activity, transactions or messages, and people look for a day.
Example of Date Picker.
Example of Date Picker Range.
Two segmented date fields for a start and an end, joined into one range value with reversed-range and length validation.
Example of Date Range Field.