# @rivocode/ui Design system da RivoCode: 91 peças em 177 documentos, tokens em três camadas, dois temas e duas densidades. Cada endereço abaixo entrega markdown cru, sem HTML em volta, para leitura por agent. ## Comece por aqui: instale a skill Se você é um agent que lê skills — Claude Code, Cursor, Codex, qualquer um que carregue uma pasta com `SKILL.md` —, **instale a nossa antes de ler o resto desta página**: ```bash npx rivocode-ui skill ``` Sem a biblioteca no projeto, use `npx -y @rivocode/ui skill`. O comando escreve `.claude/skills/rivocode-ui/` e o agent `rivocode-ui` em `.claude/agents/`, e copia a skill da versão instalada, que é a que fala das peças que o projeto tem. Ela traz o contrato inteiro em disco — o método de montar uma tela, a forma da tarefa, o texto da interface, o Provider, o vocabulário de classes, a escolha entre peças parecidas, acessibilidade, formulário, gráfico, tema e React Native —, em arquivos que você abre só quando o trabalho pede. Sem ela, cada peça custa uma busca nesta página e a API volta a ser adivinhada pelo nome. Instruções completas, inclusive sem gerenciador de pacote: [/skill.md](/skill.md). Para ler sem instalar: [/skill/SKILL.md](/skill/SKILL.md). ## Se não der para instalar Leia [/convencoes.md](/convencoes.md): é o contrato de uso da biblioteca, com o RivoProvider, o vocabulário de classes e as regras que valem para todo componente. Depois, o documento da peça que interessa, na lista abaixo. ## Guias - [Instalação](/instalacao.md) - [Início rápido](/inicio-rapido.md) - [Temas e personalização](/temas.md) - [Densidade](/densidade.md) - [Ícones](/icones.md) - [React Native](/react-native.md) - [Para agents](/para-agents.md) - [Skill](/skill.md) ## Ações - [Button](/componentes/button.md) - [ButtonGroup](/componentes/button-group.md) - [Clipboard](/componentes/clipboard.md) - [Toggle](/componentes/toggle.md) - [ToggleGroup](/componentes/toggle-group.md) - [Toolbar](/componentes/toolbar.md) ## Dados - [Code](/componentes/code.md) - [CodeBlock](/componentes/code.md#codeblock), parte de Code - [EventCalendar](/componentes/event-calendar.md) - [RelativeTime](/componentes/relative-time.md) - [Timeline](/componentes/timeline.md) - [Tracker](/componentes/tracker.md) ## Estrutura - [Accordion](/componentes/accordion.md) - [AspectRatio](/componentes/aspect-ratio.md) - [Avatar](/componentes/avatar.md) - [AvatarGroup](/componentes/avatar.md#avatargroup), parte de Avatar - [Card](/componentes/card.md) - [CardContent](/componentes/card.md#cardcontent), parte de Card - [CardDescription](/componentes/card.md#carddescription), parte de Card - [CardFooter](/componentes/card.md#cardfooter), parte de Card - [CardHeader](/componentes/card.md#cardheader), parte de Card - [CardTitle](/componentes/card.md#cardtitle), parte de Card - [Collapsible](/componentes/collapsible.md) - [DataTable](/componentes/data-table.md) - [DescriptionList](/componentes/description-list.md) - [FilterBar](/componentes/filter-bar.md) - [FilterChip](/componentes/filter-chip.md) - [Item](/componentes/item.md) - [ItemActions](/componentes/item.md#itemactions), parte de Item - [ItemContent](/componentes/item.md#itemcontent), parte de Item - [ItemDescription](/componentes/item.md#itemdescription), parte de Item - [ItemMedia](/componentes/item.md#itemmedia), parte de Item - [ItemTitle](/componentes/item.md#itemtitle), parte de Item - [PageHeader](/componentes/page-header.md) - [ScrollArea](/componentes/scroll-area.md) - [Separator](/componentes/separator.md) - [Splitter](/componentes/splitter.md) - [Stat](/componentes/stat.md) - [Table](/componentes/table.md) - [TableBody](/componentes/table.md#tablebody), parte de Table - [TableCaption](/componentes/table.md#tablecaption), parte de Table - [TableCell](/componentes/table.md#tablecell), parte de Table - [TableFooter](/componentes/table.md#tablefooter), parte de Table - [TableHead](/componentes/table.md#tablehead), parte de Table - [TableHeader](/componentes/table.md#tableheader), parte de Table - [TableRow](/componentes/table.md#tablerow), parte de Table - [VirtualList](/componentes/virtual-list.md) ## Feedback - [Alert](/componentes/alert.md) - [AlertDescription](/componentes/alert.md#alertdescription), parte de Alert - [AlertTitle](/componentes/alert.md#alerttitle), parte de Alert - [Badge](/componentes/badge.md) - [EmptyState](/componentes/empty-state.md) - [Indicator](/componentes/indicator.md) - [Kbd](/componentes/kbd.md) - [Meter](/componentes/meter.md) - [Progress](/componentes/progress.md) - [QueryBoundary](/componentes/query-boundary.md) - [Skeleton](/componentes/skeleton.md) - [Spinner](/componentes/spinner.md) - [ToastViewport](/componentes/toast-viewport.md) ## Formulário - [Autocomplete](/componentes/autocomplete.md) - [Calendar](/componentes/calendar.md) - [CalendarPanel](/componentes/calendar.md#calendarpanel), parte de Calendar - [Checkbox](/componentes/checkbox.md) - [CheckboxGroup](/componentes/checkbox-group.md) - [ColorPicker](/componentes/color-picker.md) - [Combobox](/componentes/combobox.md) - [ComboboxChip](/componentes/combobox.md#comboboxchip), parte de Combobox - [ComboboxChips](/componentes/combobox.md#comboboxchips), parte de Combobox - [ComboboxContent](/componentes/combobox.md#comboboxcontent), parte de Combobox - [ComboboxGroup](/componentes/combobox.md#comboboxgroup), parte de Combobox - [ComboboxInput](/componentes/combobox.md#comboboxinput), parte de Combobox - [ComboboxItem](/componentes/combobox.md#comboboxitem), parte de Combobox - [ComboboxList](/componentes/combobox.md#comboboxlist), parte de Combobox - [ComboboxSeparator](/componentes/combobox.md#comboboxseparator), parte de Combobox - [ComboboxValue](/componentes/combobox.md#comboboxvalue), parte de Combobox - [DatePicker](/componentes/date-picker.md) - [DateRangePicker](/componentes/date-range-picker.md) - [Editable](/componentes/editable.md) - [Field](/componentes/field.md) - [FieldDescription](/componentes/field.md#fielddescription), parte de Field - [FieldError](/componentes/field.md#fielderror), parte de Field - [FieldLabel](/componentes/field.md#fieldlabel), parte de Field - [Fieldset](/componentes/fieldset.md) - [FileUpload](/componentes/file-upload.md) - [Form](/componentes/form.md) - [FormField](/componentes/form.md#formfield), parte de Form - [Input](/componentes/input.md) - [InputAction](/componentes/input-group.md#inputaction), parte de InputGroup - [InputGroup](/componentes/input-group.md) - [InputPrefix](/componentes/input-group.md#inputprefix), parte de InputGroup - [InputSuffix](/componentes/input-group.md#inputsuffix), parte de InputGroup - [MaskedInput](/componentes/masked-input.md) - [NumberField](/componentes/number-field.md) - [OTPField](/componentes/otp-field.md) - [PasswordInput](/componentes/password-input.md) - [Radio](/componentes/radio-group.md#radio), parte de RadioGroup - [RadioGroup](/componentes/radio-group.md) - [SearchInput](/componentes/search-input.md) - [Select](/componentes/select.md) - [SelectContent](/componentes/select.md#selectcontent), parte de Select - [SelectGroup](/componentes/select.md#selectgroup), parte de Select - [SelectItem](/componentes/select.md#selectitem), parte de Select - [SelectSeparator](/componentes/select.md#selectseparator), parte de Select - [SelectTrigger](/componentes/select.md#selecttrigger), parte de Select - [SelectValue](/componentes/select.md#selectvalue), parte de Select - [Slider](/componentes/slider.md) - [Switch](/componentes/switch.md) - [TagsInput](/componentes/tags-input.md) - [Textarea](/componentes/textarea.md) - [TimeField](/componentes/time-field.md) - [TimePicker](/componentes/time-picker.md) - [Tree](/componentes/tree.md) - [TreeSelect](/componentes/tree-select.md) ## Fundação - [RivoProvider](/componentes/rivo-provider.md) ## Gráfico - [ChartContainer](/componentes/chart-container.md) - [ChartDonut](/componentes/chart-donut.md) - [ChartLegendContent](/componentes/chart-container.md#chartlegendcontent), parte de ChartContainer - [ChartRadial](/componentes/chart-radial.md) - [ChartTooltipContent](/componentes/chart-container.md#charttooltipcontent), parte de ChartContainer - [Sparkline](/componentes/sparkline.md) ## Navegação - [Breadcrumb](/componentes/breadcrumb.md) - [Command](/componentes/command.md) - [Menu](/componentes/menu.md) - [Menubar](/componentes/menubar.md) - [MenubarTrigger](/componentes/menubar.md#menubartrigger), parte de Menubar - [MenuCheckboxItem](/componentes/menu.md#menucheckboxitem), parte de Menu - [MenuContent](/componentes/menu.md#menucontent), parte de Menu - [MenuGroup](/componentes/menu.md#menugroup), parte de Menu - [MenuItem](/componentes/menu.md#menuitem), parte de Menu - [MenuLinkItem](/componentes/menu.md#menulinkitem), parte de Menu - [MenuRadioGroup](/componentes/menu.md#menuradiogroup), parte de Menu - [MenuRadioItem](/componentes/menu.md#menuradioitem), parte de Menu - [MenuSeparator](/componentes/menu.md#menuseparator), parte de Menu - [MenuSubmenu](/componentes/menu.md#menusubmenu), parte de Menu - [MenuTrigger](/componentes/menu.md#menutrigger), parte de Menu - [NavigationMenu](/componentes/navigation-menu.md) - [Pagination](/componentes/pagination.md) - [Sidebar](/componentes/sidebar.md) - [Steps](/componentes/steps.md) - [Tab](/componentes/tabs.md#tab), parte de Tabs - [TabList](/componentes/tabs.md#tablist), parte de Tabs - [TabPanel](/componentes/tabs.md#tabpanel), parte de Tabs - [Tabs](/componentes/tabs.md) ## Sobreposição - [AlertDialog](/componentes/alert-dialog.md) - [AlertDialogClose](/componentes/alert-dialog.md#alertdialogclose), parte de AlertDialog - [AlertDialogContent](/componentes/alert-dialog.md#alertdialogcontent), parte de AlertDialog - [AlertDialogDescription](/componentes/alert-dialog.md#alertdialogdescription), parte de AlertDialog - [AlertDialogFooter](/componentes/alert-dialog.md#alertdialogfooter), parte de AlertDialog - [AlertDialogTitle](/componentes/alert-dialog.md#alertdialogtitle), parte de AlertDialog - [AlertDialogTrigger](/componentes/alert-dialog.md#alertdialogtrigger), parte de AlertDialog - [ContextMenu](/componentes/context-menu.md) - [Dialog](/componentes/dialog.md) - [DialogClose](/componentes/dialog.md#dialogclose), parte de Dialog - [DialogContent](/componentes/dialog.md#dialogcontent), parte de Dialog - [DialogDescription](/componentes/dialog.md#dialogdescription), parte de Dialog - [DialogFooter](/componentes/dialog.md#dialogfooter), parte de Dialog - [DialogTitle](/componentes/dialog.md#dialogtitle), parte de Dialog - [DialogTrigger](/componentes/dialog.md#dialogtrigger), parte de Dialog - [Popconfirm](/componentes/popconfirm.md) - [Popover](/componentes/popover.md) - [PopoverClose](/componentes/popover.md#popoverclose), parte de Popover - [PopoverContent](/componentes/popover.md#popovercontent), parte de Popover - [PopoverDescription](/componentes/popover.md#popoverdescription), parte de Popover - [PopoverTitle](/componentes/popover.md#popovertitle), parte de Popover - [PopoverTrigger](/componentes/popover.md#popovertrigger), parte de Popover - [PreviewCard](/componentes/preview-card.md) - [Sheet](/componentes/sheet.md) - [SheetClose](/componentes/sheet.md#sheetclose), parte de Sheet - [SheetContent](/componentes/sheet.md#sheetcontent), parte de Sheet - [SheetDescription](/componentes/sheet.md#sheetdescription), parte de Sheet - [SheetHandle](/componentes/sheet.md#sheethandle), parte de Sheet - [SheetTitle](/componentes/sheet.md#sheettitle), parte de Sheet - [SheetTrigger](/componentes/sheet.md#sheettrigger), parte de Sheet - [Tooltip](/componentes/tooltip.md) - [TooltipContent](/componentes/tooltip.md#tooltipcontent), parte de Tooltip - [TooltipTrigger](/componentes/tooltip.md#tooltiptrigger), parte de Tooltip