shadcn/ui — Documentação Completa

Fonte: docs.shadcn.com (llms-full.txt, capturado 22-08-2026) | Páginas: 108 | Gerado: 2026-08-24

Como usar este skill

• Sem argumento — carrega o índice de tópicos e componentes pra referência
• Com um componente/tópico — pergunte sobre dialog, data-table, registry.json ou outro termo indexado; eu encontro e leio o capítulo relevante
• Com capítulo — peça ch020; eu carrego esse capítulo específico
• Navegar — pergunte "quais componentes você tem?" pra ver o índice completo

Quando você perguntar sobre um componente/tópico não coberto no índice abaixo, eu vou ler o arquivo do capítulo relevante antes de responder.

⚠️ Nota: este projeto (D:\Projetos) também tem o catálogo curado consultar-base (D:\Projetos\knowledge) pra shadcn/ui, Base UI e Aceternity UI — prefira aquele quando disponível, ele tem procedência rastreada e curadoria. Este skill é a documentação OFICIAL completa e crua, útil quando você precisa do texto exato da doc (schema de registry, prop rara, comportamento específico de versão) que o catálogo curado pode não ter capturado.

---

Índice Rápido por Categoria

Formulário e Input — Field (ch019), Button (ch020), Button Group (ch021), Input (ch022), Input Group (ch023), Input OTP (ch024), Textarea (ch025), Checkbox (ch026), Radio Group (ch027), Select (ch028), Native Select (ch029), Switch (ch030), Slider (ch031), Combobox (ch034), Label (ch035)

Data & Date — Calendar (ch032), Date Picker (ch033)

Overlay / Modal — Dialog (ch044), Alert Dialog (ch045), Sheet (ch046), Drawer (ch047), Popover (ch048), Tooltip (ch049), Hover Card (ch050), Context Menu (ch051), Dropdown Menu (ch052), Menubar (ch053), Command (ch054)

Navegação — Breadcrumb (ch037), Navigation Menu (ch038), Sidebar (ch039), Tabs (ch040), Pagination (ch076)

Feedback / Status — Alert (ch055), Toast (ch056), Toast/Sonner (ch057), Progress (ch058), Spinner (ch059), Skeleton (ch060), Badge (ch061), Empty (ch062)

Data Display — Avatar (ch063), Card (ch064), Table (ch065), Data Table (ch066), Chart (ch067), Carousel (ch068), Aspect Ratio (ch069), Typography (ch070), Item (ch071), Kbd (ch072)

Layout & Estrutura — Accordion (ch036), Separator (ch041), Scroll Area (ch042), Resizable (ch043), Collapsible (ch073), Toggle (ch074), Toggle Group (ch075)

Instalação por Framework — Next.js (ch009), Vite (ch010), Remix (ch011), Astro (ch012), Laravel (ch013), Gatsby (ch014), React Router (ch015), TanStack Router (ch016), TanStack Start (ch017), Manual (ch018)

Tema, Direção e Idioma — Theming (ch004), Dark Mode geral+frameworks (ch078-ch082), Direction/RTL geral+frameworks (ch077, ch083-ch086)

Formulários (guias por lib) — Forms overview (ch087), React Hook Form (ch088), TanStack Form (ch089), Formisch (ch090), Next.js Server Actions (ch091)

Registry / Distribuição — Introduction (ch098), Getting Started (ch099), Examples (ch100), FAQ (ch101), Authentication (ch102), MCP Server (ch097, ch103), Namespaces (ch104), Registry Directory (ch008, ch105), Open in v0 (ch106), registry.json (ch107), registry-item.json (ch108)

Guias Gerais — Introduction (ch001), CLI (ch002), components.json (ch003), Typeset (ch005), Changelog (ch006), Skills (ch007), Monorepo (ch092), Next 15+React 19 (ch093), Tailwind v4 (ch094), JavaScript (ch095), Figma (ch096)

---

Chapter Index

#	Título	Conceitos-chave
ch001	Introduction	Open Code, Composition, Distribution, AI-Ready
ch002	shadcn (CLI)	init, add, migrate, build, eject
ch003	components.json	style, tailwind.baseColor, cssVariables, aliases, registries
ch004	Theming	CSS variable tokens, background/foreground pairing, radius scale
ch005	Typeset	typeset class, size/leading/flow rhythm, not-typeset, streaming stability
ch006	Changelog	live release notes page (no stable reference content)
ch007	Skills	shadcn/ui AI Skill, shadcn info --json, project context injection
ch008	Registry Directory	built-in community registries, custom registry authoring
ch009	Installation: Next.js	shadcn/create, init -t next, --monorepo, @/* alias
ch010	Installation: Vite	@tailwindcss/vite, split tsconfig alias, vite.config.ts alias
ch011	Installation: Remix	create-remix, ~/* alias
ch012	Installation: Astro	React integration, .astro frontmatter imports
ch013	Installation: Laravel	laravel new (React starter kit), resources/js/components/ui
ch014	Installation: Gatsby	Tailwind v3 only, gatsby-node.ts webpack alias
ch015	Installation: React Router	create-react-router, ~/* alias
ch016	Installation: TanStack Router	create-tsrouter-app --add-ons shadcn, single-command install
ch017	Installation: TanStack Start	@tanstack/cli create, @/* alias
ch018	Installation: Manual	cn helper, hand-authored components.json, shadcn/tailwind.css
ch019	Field	FieldSet, FieldGroup, FieldLabel, FieldError, orientation
ch020	Button	variant, size, data-icon, buttonVariants
ch021	Button Group	orientation, ButtonGroupSeparator, nesting for spacing
ch022	Input	native input wrapper, Field pairing, no custom API
ch023	Input Group	InputGroupAddon align, InputGroupButton, focus DOM order
ch024	Input OTP	InputOTP maxLength/pattern, InputOTPSlot, InputOTPSeparator
ch025	Textarea	disabled, aria-invalid, Field/FieldLabel/FieldDescription, RTL dir
ch026	Checkbox	checked/onCheckedChange, defaultChecked, disabled, Field composition
ch027	Radio Group	RadioGroup, RadioGroupItem, choice card, disabled
ch028	Select	items array, SelectTrigger/SelectContent, alignItemWithTrigger, SelectGroup
ch029	Native Select	NativeSelect, NativeSelectOption, NativeSelectOptGroup, Select vs Native Select
ch030	Switch	checked/onCheckedChange, size, choice card, disabled
ch031	Slider	defaultValue/value array, min/max/step, orientation vertical, dir RTL
ch032	Calendar	mode single/range, captionLayout dropdown, timeZone, modifiers, --cell-size
ch033	Date Picker	composição Popover+Calendar, render prop no trigger, data-empty, open/onOpenChange
ch034	Combobox	items/itemToStringValue, multiple com ComboboxChips, ComboboxGroup, ComboboxTrigger popup
ch035	Label	htmlFor, Field, FieldLabel, RTL dir
ch036	Accordion	defaultValue, multiple, AccordionItem disabled, composição strict
ch037	Breadcrumb	BreadcrumbLink render, BreadcrumbPage, BreadcrumbSeparator children, BreadcrumbEllipsis
ch038	Navigation Menu	NavigationMenuTrigger/Content, navigationMenuTriggerStyle(), render, dir/align RTL
ch039	Sidebar	SidebarProvider, useSidebar, variant inset, collapsible icon/offcanvas/none, Collapsible groups
ch040	Tabs	TabsList variant="line", orientation vertical, TabsTrigger disabled
ch041	Separator	orientation vertical, uso entre itens de menu/lista
ch042	Scroll Area	ScrollBar orientation horizontal, whitespace-nowrap
ch043	Resizable	ResizablePanelGroup, defaultSize percentual, react-resizable-panels v3→v4
ch044	Dialog	render prop, showCloseButton, sticky footer com scroll interno
ch045	Alert Dialog	AlertDialogMedia, size="sm", variant destructive
ch046	Sheet	side (top/right/bottom/left), showCloseButton
ch047	Drawer	swipeDirection, snapPoints, modal=false, migração Vaul→Base UI
ch048	Popover	align, side lógico (inline-start/inline-end), PopoverHeader
ch049	Tooltip	TooltipProvider obrigatório, tooltip em disabled via span
ch050	Hover Card	delay/closeDelay, side/align
ch051	Context Menu	ContextMenuSub, pointer-fine/pointer-coarse, variant destructive
ch052	Dropdown Menu	DropdownMenuPortal em submenu, CheckboxItem, RadioGroup, align end (avatar)
ch053	Menubar	MenubarMenu múltiplos, inset, mesma família de Dropdown/Context
ch054	Command	cmdk (não Base UI), CommandDialog, CommandGroup heading
ch055	Alert	variant default/destructive, AlertAction, cor customizada via className
ch056	Toast	toast.add, toast.close, actionProps, type, Toaster
ch057	Toast (Sonner)	alias histórico de Toast, mesma API, toast.add types
ch058	Progress	value, ProgressLabel, ProgressValue, composição controlada
ch059	Spinner	LoaderIcon, animate-spin, data-icon, size-*
ch060	Skeleton	placeholder sem props, composição via className, avatar/card/table skeleton
ch061	Badge	variant, data-icon, render prop, cores customizadas
ch062	Empty	EmptyMedia variant icon/default, EmptyHeader, EmptyContent
ch063	Avatar	AvatarImage/AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount
ch064	Card	size, --card-spacing, CardAction, edge-to-edge content
ch065	Table	TableHeader/TableBody/TableFooter, sem lógica de dados própria
ch066	Data Table	tableFeatures, columnHelper, useTable, table.FlexRender
ch067	Chart	ChartConfig, ChartContainer, var(--color-KEY), ChartTooltip/Legend
ch068	Carousel	opts (Embla), setApi, plugins, basis-/pl-/-ml-*
ch069	Aspect Ratio	ratio prop, fill+object-cover
ch070	Typography	classes Tailwind por elemento, sem componente real
ch071	Item	variant, size, ItemMedia (icon/image), render, Field vs Item
ch072	Kbd	Kbd, KbdGroup, uso em Button/Tooltip/InputGroup
ch073	Collapsible	Collapsible, CollapsibleTrigger/Content, render prop, open/onOpenChange
ch074	Toggle	variant, size, aria-label, group-aria-pressed
ch075	Toggle Group	multiple, spacing (default 2), orientation, value array
ch076	Pagination	PaginationLink isActive, PaginationPrevious/Next text prop, Next.js Link swap
ch077	Direction	DirectionProvider, useDirection
ch078	Dark Mode	índice de guias por framework, padrão ModeToggle Sun/Moon
ch079	Dark Mode (Next.js)	next-themes, suppressHydrationWarning, attribute="class"
ch080	Dark Mode (Vite)	ThemeProviderContext custom, localStorage, matchMedia
ch081	Dark Mode (Astro)	script is:inline, MutationObserver, client:load
ch082	Dark Mode (Remix)	remix-themes, cookie de sessão, PreventFlashOnWrongTheme
ch083	RTL	rtl:true, classes lógicas start-/end-, migrate rtl, exceções manuais
ch084	RTL (Next.js)	create --template next --rtl, DirectionProvider, Noto_Sans_Arabic
ch085	RTL (Vite)	index.html dir/lang, Fontsource, main.tsx wiring
ch086	RTL (TanStack Start)	__root.tsx, createRootRoute, Fontsource
ch087	Forms	índice de guias por lib (RHF, TanStack Form, Formisch)
ch088	React Hook Form	Controller pattern, data-invalid/aria-invalid, useFieldArray, zodResolver
ch089	TanStack Form	form.Field render-prop, field.state.meta, mode="array", pushValue/removeValue
ch090	Formisch	Field/FieldArray, funções top-level (form,config), Valibot, field.props
ch091	Next.js (forms)	useActionState, Server Actions, Field data-invalid/aria-invalid, safeParse
ch092	Monorepo	init --monorepo, @workspace/ui, per-workspace components.json aliases, package.json#imports
ch093	Next.js 15 + React 19	ERESOLVE peer deps, --force/--legacy-peer-deps, recharts react-is override
ch094	Tailwind v4	@theme inline, data-slot, forwardRef removal, size-*, tw-animate-css
ch095	JavaScript	tsx: false, jsconfig.json paths alias
ch096	Figma	community kits, free vs paid, design-to-code plugins
ch097	MCP Server	mcp init --client, .mcp.json, components.json#registries, content negotiation
ch098	Introduction (Registry)	registry as distribution system, framework-agnostic
ch099	Getting Started (Registry)	registry.json single vs include, shadcn build, loadRegistry/loadRegistryItem, CLI test commands
ch100	Examples (Registry)	registry:style/theme/block/ui/lib/hook/font/base, target placeholders, universal items
ch101	FAQ (Registry)	complex component anatomy, cssVars.light/dark/theme, bare vs GitHub registryDependencies
ch102	Authentication (Registry)	Bearer/API key/query param auth, env var expansion, custom 401/403 messages
ch103	MCP Server (Registry)	registry.json at root requirement, MCP best practices
ch104	Namespaces	@namespace syntax, URL placeholders {name}/{style}, dependency resolution order, override pattern
ch105	Registry Directory	registries.json index, flat structure requirement, submission process
ch106	Open in v0	v0.dev/chat/api/open?url=, feature limitations, query-param-only auth
ch107	registry.json	$schema/name/homepage/include/items fields, GitHub repo as registry
ch108	registry-item.json	type enum, files[].target, cssVars, css, font object, target placeholders

Topic Index

• @namespace/resource-name (registry) → ch104
• @theme / @theme inline → ch004, ch018, ch094
• @workspace/ui import alias → ch092
• Accordion → ch036
• Adding a Tailwind color via cssVars → ch101
• AI Skills (shadcn/ui skill) → ch007
• AlertDialogMedia → ch045
• Aliases (components.json) → ch003
• Aspect Ratio → ch069
• Astro installation → ch012
• Avatar / AvatarGroup → ch063
• Badge → ch061
• Booked dates (Calendar) → ch032
• Breadcrumb → ch037
• Button / buttonVariants / cursor pointer → ch020
• Button as link → ch020
• Button Group / ButtonGroupSeparator / ButtonGroupText → ch021
• Calendar → ch032
• Carousel / Embla Carousel → ch068
• Card / CardAction → ch064
• Changelog → ch006
• Chart / Recharts / accessibilityLayer → ch067
• Checkbox → ch026
• Choice Card (padrão) → ch027, ch030
• cmdk → ch054
• cn helper (clsx + tailwind-merge) → ch018
• Collapsible → ch036, ch039, ch073
• Combobox / groups / popup pattern / multiple → ch034
• Command / Command Palette pattern → ch054
• components.json → ch003
• Content negotiation (Accept/User-Agent) → ch097, ch099
• Context Menu → ch051
• Controller (React Hook Form) → ch088
• Custom CSS in registry items (@layer, @utility, @plugin, @import) → ch100, ch108
• Dark mode tokens → ch004
• Dark Mode (visão geral) → ch078
• Dark Mode (Astro) → ch081
• Dark Mode (Next.js) → ch079
• Dark Mode (Remix) → ch082
• Dark Mode (Vite) → ch080
• Data Table / TanStack Table v9 → ch066
• Date of Birth picker → ch033
• Date Picker → ch033
• DirectionProvider / useDirection → ch077
• Dialog → ch044
• Drawer / snapPoints / Vaul migration → ch047
• DropdownMenu / DropdownMenuPortal → ch037, ch038, ch039, ch052
• Empty → ch062
• Estado inválido (aria-invalid + data-invalid) → ch026, ch027, ch028, ch029, ch030, ch088-ch091
• Field / FieldSet / FieldLegend / FieldGroup / FieldError → ch019, ch025, ch035, ch088, ch089, ch090
• FieldArray (Formisch) → ch090
• Figma kits (free/paid) → ch096
• Forms (visão geral) → ch087
• form.Field / mode="array" (TanStack Form) → ch089
• Formisch → ch090
• Gatsby installation → ch014
• Hover Card → ch050
• Introduction / philosophy → ch001
• Input → ch022
• InputGroup / InputGroupAddon / InputGroupButton → ch023
• InputOTP / InputOTPSlot / InputOTPSeparator → ch024
• Item / ItemGroup → ch071
• JavaScript-only projects (tsx: false) → ch095
• Kbd / KbdGroup → ch072
• Label → ch035
• Laravel installation → ch013
• Loading loop / Skeleton → ch060
• loadRegistry / loadRegistryItem → ch099
• MCP registry.json root requirement → ch103
• Menubar → ch053
• Modal / modal="trap-focus" → ch047
• modifiers / modifiersClassNames (Calendar) → ch032
• Monorepo CLI support (init --monorepo) → ch092
• Namespace syntax (@namespace/resource) → ch104
• NativeSelect / NativeSelectOptGroup / NativeSelectOption → ch029
• Natural Language date picker → ch033
• NavigationMenu / navigationMenuTriggerStyle() → ch038
• next-themes / ModeToggle (Next.js) → ch079
• Next.js installation → ch009
• npx shadcn init / add / migrate / eject → ch002
• OKLCH dark mode colors update → ch094
• Open in v0 integration → ch106
• Override pattern for third-party registry items → ch104
• Pagination / PaginationLink → ch076
• Persian / Hijri / Jalali Calendar → ch032
• Persistência (rtl migrate, base-color, icons, radix) → ch002
• PreventFlashOnWrongTheme → ch082
• Progress → ch058
• Radius scale (--radius) → ch004, ch018
• RadioGroup / RadioGroupItem → ch027
• Range calendar / Range slider → ch031, ch032
• React 19 peer dependency errors (npm ERESOLVE) → ch093
• React Router installation → ch015
• recharts + React 19 (react-is override) → ch093
• Registry as distribution system → ch098
• Registry authentication patterns (Bearer/API key/query param) → ch102
• Registry CLI testing (list/search/view/add) → ch099, ch104
• Registry dependency resolution algorithm → ch104
• Registry Directory / registries.json index → ch008, ch105
• Registry versioning via query params → ch104
• registry.json structure (single vs include) → ch099, ch107
• registry.json schema fields → ch107
• registry-item.json schema fields → ch108
• registry:style / registry:theme / registry:block / registry:ui / registry:lib / registry:hook → ch100
• registry:font (Google Fonts) → ch100, ch108
• registry:base (design system config) → ch100, ch108
• registryDependencies (bare/GitHub/pinning #ref) → ch099, ch101, ch104, ch108
• Remix installation → ch011
• Resizable / react-resizable-panels → ch043
• render prop (Base UI) → ch033-ch039, ch044-ch047
• RTL support / RTL (visão geral) → ch019-ch024, ch083
• RTL setup Next.js / Vite / TanStack Start → ch084, ch085, ch086
• remix-themes → ch082
• Scroll Area → ch042
• Select / SelectContent / SelectTrigger → ch028
• shadcn build command → ch099
• shadcn MCP server setup (all clients) → ch097
• Sheet → ch046
• Sidebar / SidebarProvider / useSidebar → ch039
• Skeleton → ch060
• Slider / Vertical slider → ch031
• Sonner (alias) → ch057
• Spinner → ch059
• Standard Schema → ch088, ch089
• Switch → ch030
• Table → ch065
• Tabs → ch040
• tailwind.baseColor / tailwind.cssVariables → ch003, ch004
• Tailwind v4 migration (@theme inline, data-slot, forwardRef removal) → ch094
• TanStack Form → ch089
• TanStack Router installation → ch016
• TanStack Start installation → ch017
• Target placeholders (@components/, @ui/, @lib/, @hooks/) → ch100, ch108
• Textarea → ch025
• Theming / CSS variables → ch004
• Time Picker → ch033
• Toast / Toaster → ch056
• Toggle / ToggleGroup → ch074, ch075
• Tooltip / TooltipProvider → ch049
• tw-animate-css migration → ch094
• Typeset → ch005
• Typography → ch070
• Universal registry items (registry:item) → ch100, ch108
• useFieldArray (RHF) → ch088
• useSidebar → ch039
• Valibot → ch090
• variant="destructive" → ch045, ch051, ch052, ch055
• Vite installation → ch010
• Week numbers (Calendar) → ch032
• zodResolver → ch088

Supporting Files

• glossary.md — todos os termos-chave com definições
• patterns.md — técnicas e padrões de uso
• cheatsheet.md — regras de decisão rápida (qual componente usar quando)

---

Scope & Limits

Este skill cobre a documentação oficial do shadcn/ui capturada em 22-08-2026 — pode ficar desatualizado conforme o projeto evolui. Para componentes shadcn/Base UI/Aceternity com curadoria e procedência, prefira o catálogo em D:\Projetos\knowledge via skill consultar-base quando disponível.