# tealmac UI blocks for shadcn/ui

> 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.

tealmac UI publishes 49 blocks for shadcn/ui, all of them free. In its own words: 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. Its blocks cover sidebar, login and sign-up, dashboard and chat.

Free blocks install with the shadcn CLI under the @tealmac namespace, so the code lands in your project.

- Page, with live previews: https://shadcn.exchange/r/tealmac
- Its own site: https://ui.tealmac.com/?utm_source=shadcn.exchange
- 49 blocks, all free. Last changed 2026-11-01.
- Categories: Dashboard (1), Login (10), Sidebar (16), Chat (1)
- Search its blocks as JSON: `https://shadcn.exchange/api/catalog?kind=blocks&registry=tealmac&q=<words>`

Each block's page answers in Markdown, source included, at its address with `.md` on the end. [The whole site for agents](https://shadcn.exchange/llms.txt).

## Free blocks

All 49 blocks, in the order its page shows them. Each installs with the command beside it, in a project that has shadcn/ui set up.

- [Cancellation Deadline Note](https://shadcn.exchange/r/tealmac/cancellation-deadline-note): A check-in date field that works out the last moment for free cancellation and tells the guest whether it is still open, closing soon or already past. Use this when a booking is free to cancel until a cut-off before the stay and the guest… `npx shadcn@latest add https://shadcn.exchange/r/tealmac/cancellation-deadline-note.json`
- [Copyable Read-Only Field](https://shadcn.exchange/r/tealmac/copyable-readonly-field): 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 pasti… `npx shadcn@latest add https://shadcn.exchange/r/tealmac/copyable-readonly-field.json`
- [All variants](https://shadcn.exchange/r/tealmac/icon-tile-all-variants): Every icon tile variant. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/icon-tile-all-variants.json`
- [Year over Year Range](https://shadcn.exchange/r/tealmac/year-over-year-range): A day range that also shows the same dates a year earlier, moving 29 February to 28 February in non-leap years and flagging the day count mismatch. Use this when figures are read against the same dates last year and leap years must not ske… `npx shadcn@latest add https://shadcn.exchange/r/tealmac/year-over-year-range.json`
- [Signup 01](https://shadcn.exchange/r/tealmac/signup-01): A simple signup form. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/signup-01.json`
- [Sidebar 02](https://shadcn.exchange/r/tealmac/sidebar-02): A sidebar with collapsible sections. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-02.json`
- [Frame with dense layout](https://shadcn.exchange/r/tealmac/frame-dense-layout): Frame with dense layout, built from the frame component. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/frame-dense-layout.json`
- [Sidebar 07](https://shadcn.exchange/r/tealmac/sidebar-07): A sidebar that collapses to icons. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-07.json`
- [Age Gate Date Field](https://shadcn.exchange/r/tealmac/age-gate-date-field): A date of birth that decides whether someone is old enough, with the exact date they become eligible, without ever blocking typing. Use this when a product or purchase has a minimum age and the person should learn when they will qualify. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/age-gate-date-field.json`
- [Family glyphs](https://shadcn.exchange/r/tealmac/file-type-family-glyphs): One glyph per family, drawn on one grid, for family types and the glyph option. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/file-type-family-glyphs.json`
- [Sidebar 05](https://shadcn.exchange/r/tealmac/sidebar-05): A sidebar with collapsible submenus. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-05.json`
- [Auto Form with Field Overrides](https://shadcn.exchange/r/tealmac/auto-form-field-overrides): Shows the override layer of a generated form: relabelled fields, a textarea and a radio group instead of the defaults, a hidden field, custom option labels, a disabled field and a custom order. Use this when the schema is right but the pre… `npx shadcn@latest add https://shadcn.exchange/r/tealmac/auto-form-field-overrides.json`
- [Two-sided conversation](https://shadcn.exchange/r/tealmac/message-two-sided-chat): Incoming and outgoing rows separated by nothing but the align prop. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/message-two-sided-chat.json`
- [Vacation Rental Minimum Stay](https://shadcn.exchange/r/tealmac/vacation-rental-minimum-stay): Typed check-in and check-out dates where the minimum number of nights depends on the check-in date, such as a weekend, a holiday week or the high season. Use this when a rental host sets a longer minimum stay for some dates than for others. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/vacation-rental-minimum-stay.json`
- [Autosaving Note](https://shadcn.exchange/r/tealmac/autosave-note-with-status): A note that saves itself a moment after you stop typing, shows Saving, Saved at a time or a retryable error, and saves immediately when you leave the page or press the button. Use this when losing a draft is worse than saving too often. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/autosave-note-with-status.json`
- [Login 01](https://shadcn.exchange/r/tealmac/login-01): A simple login form. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/login-01.json`
- [Sidebar 01](https://shadcn.exchange/r/tealmac/sidebar-01): A simple sidebar with navigation grouped by section. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-01.json`
- [Validate on Blur, then on Change](https://shadcn.exchange/r/tealmac/validate-on-blur-then-change): The "reward early, punish late" strategy: a field stays quiet while typing, validates when you leave it, and once it has shown an error it re-validates on every keystroke so the message clears the moment it is fixed. Use this when live val… `npx shadcn@latest add https://shadcn.exchange/r/tealmac/validate-on-blur-then-change.json`
- [Sidebar 03](https://shadcn.exchange/r/tealmac/sidebar-03): A sidebar with submenus. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-03.json`
- [Sidebar 10](https://shadcn.exchange/r/tealmac/sidebar-10): A sidebar in a popover. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-10.json`
- [Sidebar 15](https://shadcn.exchange/r/tealmac/sidebar-15): A left and a right sidebar. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-15.json`
- [Login 03](https://shadcn.exchange/r/tealmac/login-03): A login page with a muted background. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/login-03.json`
- [Birth Date Field](https://shadcn.exchange/r/tealmac/birth-date-field): A typed date of birth that cannot be in the future or implausibly old, and that shows the age it implies so a typo in the year is caught straight away. Use this when a form asks for a date of birth and a typo in the year should be obvious. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/birth-date-field.json`
- [Adaptive Date Input](https://shadcn.exchange/r/tealmac/adaptive-date-input): A date input that uses the phone's native date picker on touch devices and the segmented date field with a calendar on desktop, with one ISO value. Use this when the same form runs on phones and desktops and each should get the date contro… `npx shadcn@latest add https://shadcn.exchange/r/tealmac/adaptive-date-input.json`
- [Login 05](https://shadcn.exchange/r/tealmac/login-05): A simple email-only login page. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/login-05.json`
- [Password Caps Lock Warning](https://shadcn.exchange/r/tealmac/password-caps-lock-warning): 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. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/password-caps-lock-warning.json`
- [Sidebar 09](https://shadcn.exchange/r/tealmac/sidebar-09): Collapsible nested sidebars. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-09.json`
- [Habit Streak Calendar](https://shadcn.exchange/r/tealmac/habit-streak-calendar): A month calendar where each click marks a day done or not, computing the current and the best streak and refusing future days. Use this when a habit or practice is logged day by day and the run of consecutive days matters. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/habit-streak-calendar.json`
- [Resend Button with Cooldown](https://shadcn.exchange/r/tealmac/resend-cooldown-button): 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. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/resend-cooldown-button.json`
- [Sidebar 04](https://shadcn.exchange/r/tealmac/sidebar-04): A floating sidebar with submenus. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-04.json`
- [Signup 05](https://shadcn.exchange/r/tealmac/signup-05): A simple signup form with social providers. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/signup-05.json`
- [Frame with separated panels](https://shadcn.exchange/r/tealmac/frame-separated-panels): Frame with separated panels, built from the frame component. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/frame-separated-panels.json`
- [Signup 03](https://shadcn.exchange/r/tealmac/signup-03): A signup page with a muted background. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/signup-03.json`
- [Login 02](https://shadcn.exchange/r/tealmac/login-02): A two column login page with a cover panel. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/login-02.json`
- [Sidebar 13](https://shadcn.exchange/r/tealmac/sidebar-13): A sidebar in a dialog. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-13.json`
- [Sidebar 06](https://shadcn.exchange/r/tealmac/sidebar-06): A sidebar with submenus as dropdowns. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-06.json`
- [Signup 02](https://shadcn.exchange/r/tealmac/signup-02): A two column signup page with a cover panel. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/signup-02.json`
- [Sidebar 16](https://shadcn.exchange/r/tealmac/sidebar-16): A sidebar with a sticky site header. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-16.json`
- [Sidebar 12](https://shadcn.exchange/r/tealmac/sidebar-12): A sidebar with a calendar. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-12.json`
- [Sidebar 11](https://shadcn.exchange/r/tealmac/sidebar-11): A sidebar with a collapsible file tree. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-11.json`
- [Relative Date Label](https://shadcn.exchange/r/tealmac/relative-date-label): 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… `npx shadcn@latest add https://shadcn.exchange/r/tealmac/relative-date-label.json`
- [Persian Calendar Picker](https://shadcn.exchange/r/tealmac/persian-calendar-picker): 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… `npx shadcn@latest add https://shadcn.exchange/r/tealmac/persian-calendar-picker.json`
- [Sidebar 08](https://shadcn.exchange/r/tealmac/sidebar-08): An inset sidebar with secondary navigation. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-08.json`
- [Signup 04](https://shadcn.exchange/r/tealmac/signup-04): A signup page with a form and a side panel. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/signup-04.json`
- [Auto Form with Nested Objects and Arrays](https://shadcn.exchange/r/tealmac/auto-form-nested-arrays): A schema with a nested address object and an array of team members renders as fieldsets and a repeatable list with add, remove and reorder; errors point at the exact item. Use this when the data is a small tree, not a flat list of fields. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/auto-form-nested-arrays.json`
- [Angle Slider Heading Compass](https://shadcn.exchange/r/tealmac/angle-slider-heading-compass): A compass bearing control that shows the heading in degrees and as a cardinal point (N, NE, E and so on), snaps to 5 degrees and has quick buttons for the four directions. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/angle-slider-heading-compass.json`
- [Dashboard 01](https://shadcn.exchange/r/tealmac/dashboard-01): A dashboard with a sidebar, summary cards, an interactive area chart and a sortable data table. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/dashboard-01.json`
- [Login 04](https://shadcn.exchange/r/tealmac/login-04): A login page with a form and a side panel. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/login-04.json`
- [Sidebar 14](https://shadcn.exchange/r/tealmac/sidebar-14): A sidebar on the right. `npx shadcn@latest add https://shadcn.exchange/r/tealmac/sidebar-14.json`