26 pages from the docs
How to do the thing you came for
Install it, theme it, animate it, wire it to forms and tables, hand it to your coding agent. Each link opens a real docs page.
3 pages
Get started
- Connect your agentGive your AI coding agent the tealmac UI catalog through the hosted MCP server, the shadcn MCP server or llms.txt.
- InstallAdd tealmac UI to a React and Tailwind CSS 4 project and use your first component.
- Make it yoursApply a colour theme or a complete preset, set your brand colour, radius and font, and check dark mode.
15 pages
How-to guides
- 3D componentsUse WebGL and 3D components without hurting load time, battery or accessibility.
- Add componentsEvery way to install tealmac UI items, with each package manager, by namespace, several at once, by hand and in a monorepo.
- ChartsAdd theme-aware charts built on the shadcn chart component and Recharts.
- Dark modeSwitch between light and dark with a class on the root element, using next-themes or your own toggle.
- Data tablesBuild sortable, filterable, paginated tables with the Table primitive and TanStack Table.
- FormsBuild accessible forms with react-hook-form, zod and the Field components, including labels, descriptions and errors.
- Motion and reduced motionHow animated components respect prefers-reduced-motion, and how to keep your own animations in line.
- Set up ProAdd your licence key and the Pro registry once per project, then install Pro templates and blocks with the shadcn CLI.
- Pro starter appsFour complete, multi-page apps (SaaS, AI assistant, admin console and shop) that install into your project with one command.
- Cortex starter appA complete AI assistant app with streaming chat, citations, a canvas, prompts, files, usage and settings, plus an adapter for the Vercel AI SDK.
- Launchpad starter appA complete SaaS starter in twelve pages, with auth screens, onboarding, a dashboard, team, billing with a Dodo Payments checkout, settings and an inbox.
- Ledger console starter appA complete admin and analytics console with a 336-row data grid, detail drawer, reports, audit log, role-based access and settings.
- Storefront starter appA complete e-commerce starter with a filterable collection, product pages, cart drawer, checkout, order confirmation, order history and wishlist.
- ThemingThe CSS variables every component reads, how to change them, and how to scope a theme to part of a page.
- Update componentsSee what changed, pull a new version of a component, and keep your own edits.
4 pages
Concepts
- AccessibilityThe accessibility bar every component is built to, how it is checked, and what automated checks cannot tell you.
- Built for agentsWhat an AI coding agent can read from tealmac UI, with or without MCP.
- How it worksWhy tealmac UI is a registry you install from rather than a package, and what that means for ownership and updates.
- StoryWhy tealmac UI exists.
4 pages
Reference
- CLI commandsThe shadcn CLI commands you use with tealmac UI, with the options that matter.
- LegacyNotes on older and inherited components.
- MCP toolsEvery tool of the hosted tealmac UI MCP server, with its inputs and the shape of its answer.
- RegistryAddresses, namespaces, file locations and the JSON format of the tealmac UI shadcn registry.
FAQ