# Docs

- [Documentation](/docs): Everything you need to ship Camaleo — setup, the thirteen skins, every component and how to make it yours. Every example on every page wears the skin you pick in the bar above.
- [Changelog](/docs/changelog): What changed in Camaleo, newest first. Nothing is published to npm yet; everything below leads up to 1.0.
- [Theme customizer](/docs/customizer): Pick a skin, a brand color and a few tokens, watch real components change, then take the CSS, the provider and a JSON preset with you.
- [Installation](/docs/installation): Two packages, one stylesheet per skin and a StyleProvider. Works with the Next.js App Router, Vite and any React 19 app.
- Examples
  - [Examples](/docs/blocks): Examples are complete screens built only with Camaleo components. Each one is live in the skin, mode and brand of the preview bar, and its code is the file that runs: open one to try it at desktop, tablet and phone width, then copy it.
  - [Admin table](/docs/blocks/admin-table): A team members table with search, filters, sorting, row selection with bulk actions, pagination, a row menu, editing in a drawer and a delete confirmation.
  - [Sign in](/docs/blocks/auth): Sign in, sign up and password reset in one card, with password show and hide, validation, a one-time code step, a magic link and a passkey button.
  - [Checkout](/docs/blocks/checkout): A four-step checkout with an order summary, address validation, delivery options, card fields, a review step and a confirmation.
  - [Sales dashboard](/docs/blocks/dashboard): A store's sales dashboard: an app shell with a collapsible sidebar, stats with deltas, a revenue chart drawn with tokens, sales by channel and a sortable orders table with a channel filter.
  - [Inbox](/docs/blocks/inbox): A mail inbox with folders, unread state, multi-select with bulk actions, search, a reading pane, empty states and keyboard navigation.
  - [Product landing](/docs/blocks/landing): A product landing page: header with a menu that folds on small screens, hero with a product glimpse, logos and numbers, a features grid, a testimonial, a pricing teaser, an FAQ, a sign-up call to action and a footer.
  - [Pricing](/docs/blocks/pricing): A pricing page with a monthly or yearly switch that changes every price, three plans with the popular one highlighted, a comparison table and a billing FAQ.
  - [Account settings](/docs/blocks/settings): Account settings inside the app's shell, in four sections: a profile with photo upload and validation, notification switches, password change with two-factor setup, and a danger zone that asks for confirmation.
  - [Multi-step signup](/docs/blocks/signup): A three-step signup with a Stepper, validation on each step, an error summary that links to each field, a review step with edit links and a success state.
- Components

  - **Actions**
  - [Button](/docs/components/button): Triggers an action. Four variants and four sizes, a loading state that keeps focus, and a look that comes entirely from the active skin.
  - [Toggle](/docs/components/toggle): A button that stays pressed, such as Bold in an editor. ToggleGroup joins several, with one or many pressed and arrow-key navigation.
  - [Spinner](/docs/components/spinner): Shows that something is loading when you can't say how long it will take. It announces its label to screen readers and inherits the text color and size.

  - **Forms**
  - [Field](/docs/components/field): Wraps a form control with its label, description and error, wires them together for assistive tech and tracks validity. Comes with Input, Textarea, Label and Fieldset.
  - [Select](/docs/components/select): Picks one option, or a few, from a list that stays closed until needed. The popup follows the skin through the portal and opens with the keyboard as well as the pointer.
  - [Native select](/docs/components/native-select): The browser's own select, styled by the skin. Best for long, familiar lists and on phones, where it opens the system picker.
  - [Combobox](/docs/components/combobox): A text input that filters a list as you type. Use it when there are too many options to scroll, or when people know the name of what they want.
  - [Checkbox](/docs/components/checkbox): Turns one option on or off, or picks any number from a list. CheckboxGroup holds the values as an array and can drive a "select all" box.
  - [Radio group](/docs/components/radio-group): One choice out of a few options that are all visible at once. The group is a single tab stop; the arrow keys move and select.
  - [Switch](/docs/components/switch): Turns a setting on or off, with the effect applied right away. For choices that wait for a Save button, use a Checkbox.
  - [Slider](/docs/components/slider): Sets a value, or a range, by dragging along a track. Best for approximate amounts where seeing the position matters more than typing an exact number.
  - [Number field](/docs/components/number-field): A number input with minus and plus buttons. Keeps the value within bounds, steps with the keyboard and formats it as currency, percent or a unit.

  - **Advanced forms**
  - [Input group](/docs/components/input-group): One field box around an input and the text, icons or buttons that belong to it. PasswordInput and SearchInput are ready-made groups for the two you build most.
  - [OTP field](/docs/components/otp-field): A one-time code split into one cell per character. Typing moves forward, Backspace goes back and a paste or SMS autofill fills every cell at once.
  - [TagsInput](/docs/components/tags-input): Several short values in one field, shown as removable chips. Use it for topics, labels, skills or email recipients, with or without a list of suggestions.
  - [File upload](/docs/components/file-upload): A drop area with a real file input behind a button, plus a list that shows each file's progress, result or error. It reports files; sending them is up to your app.
  - [Rating](/docs/components/rating): Stars for giving a score, or for showing an average. Interactive, it behaves like a radio group; read-only, it is one image with a text name and supports half stars.
  - [Chip](/docs/components/chip): Compact choices that filter a list, or small removable values like people and labels. ChipGroup gathers filter chips under one name with arrow-key navigation.
  - [Error summary](/docs/components/error-summary): Lists the invalid fields at the top of a form after a failed submit, each one a link that moves focus to its control. Use it for forms with more than a couple of fields.

  - **Dates**
  - [Calendar](/docs/components/calendar): Shows a month and lets people pick one day with the mouse, touch or keyboard. Use it when the date is near and seeing the week matters, such as an appointment or a delivery.
  - [Range calendar](/docs/components/range-calendar): Shows a month and lets people pick a start and an end day in two clicks. Use it for stays, trips, time off and report periods.
  - [Date picker](/docs/components/date-picker): A date input you can type into or fill from a calendar popup. Use it for dates close to today, like a delivery, a booking or a deadline.
  - [Date range picker](/docs/components/date-range-picker): A start and an end date in one field, typed or picked from a range calendar. Use it for stays, leave, reports and anything that lasts more than a day.
  - [Date field](/docs/components/date-field): Types a date into day, month and year segments in the order and format of the locale. For dates people already know, like a birthday or a contract start, with no calendar in the way.
  - [Time field](/docs/components/time-field): Types a time into hour, minute and AM/PM segments, on the locale's clock. Carries a time zone when the value has one, so a meeting at 2 PM means the same moment for everyone.

  - **Feedback**
  - [Alert](/docs/components/alert): A message that stays in the page until the situation changes. Use it for things people need to know or fix where they are working.
  - [Toast](/docs/components/toast): Short feedback after an action, shown in a corner and gone after a few seconds. Use it to confirm what happened without moving people away from their work.
  - [Progress](/docs/components/progress): Shows how far a task has gone, like an upload, an export or a setup flow. For a measurement that just sits in a range, such as storage used, use Meter.
  - [Meter](/docs/components/meter): Shows a measurement inside a known range, like storage used, seats taken or password strength. For a task that moves toward done, like an upload, use Progress.
  - [Skeleton](/docs/components/skeleton): A quiet placeholder in the shape of the content that is on its way. Use it when you know the layout, so the page doesn't jump when the data arrives.
  - [Tooltip](/docs/components/tooltip): A short label that appears when people hover or focus a control. Use it to name icon buttons and show shortcuts, never for information people need.

  - **Display**
  - [Badge](/docs/components/badge): A status, count or category in one or two words, next to a title or in a table row. It is text only; for something people click or remove, use a Chip.
  - [Avatar](/docs/components/avatar): A person's photo, or their initials when there is no photo. Use it next to names in comments, lists and profiles, so people recognize each other faster.
  - [Card](/docs/components/card): A box that groups one subject, like a plan, a project or a setting, with its title, content and actions. Use it when people compare or scan several of these side by side.
  - [Kbd](/docs/components/kbd): Shows a key or a keyboard shortcut, like Ctrl K, in the text, a menu or a tooltip. It only displays the keys; you wire the shortcut yourself.
  - [Table](/docs/components/table): Shows records in rows and columns so people can compare them, like invoices or stock. For sorting, filtering and pages of data, use Data table.
  - [Typography](/docs/components/typography): Headings and paragraphs in the skin's type. Heading sets the tag from the page outline and the size from the space it has, separately.
  - [Separator](/docs/components/separator): A thin line between groups of content or of buttons. Use it when spacing alone doesn't make the groups clear.
  - [Link](/docs/components/link): Takes people to another page, a part of this page or a file. For actions like saving, copying or deleting, use Button.

  - **Data display**
  - [DataTable](/docs/components/data-table): A table driven by data and column definitions, with sorting, row selection, pages and a loading state built in. For a static table you write by hand, use Table.
  - [DataList](/docs/components/data-list): Label and value pairs for the details of one record, like an order, a profile or a server. To compare several records, use a table.
  - [Stat](/docs/components/stat): Shows one key number, what it measures and how it changed, like revenue this month. Use a row of them at the top of a dashboard.
  - [Timeline](/docs/components/timeline): Lists events in the order they happened, like the steps of a delivery or the history of a ticket. Each event has a title, details and a time.
  - [Empty state](/docs/components/empty-state): Fills a page, card or list that has nothing to show yet. It says what is empty, why, and what to do next.
  - [Image](/docs/components/image): Shows a photo in a frame, with an optional caption, a loading skeleton and a fallback that keeps the layout when the file fails to load.
  - [ProgressCircle](/docs/components/progress-circle): A ring that shows how far a task has gone, sized for cards, tiles and toolbars. When there is room for a full-width bar, use Progress.
  - [CodeBlock](/docs/components/code-block): Shows a snippet of code with its file name, line numbers and a copy button, for install steps, API references and setup guides.
  - [TreeView](/docs/components/tree-view): Shows items that nest inside each other, like folders and files or categories, so people can open a branch and pick one item. For a flat list, use a list or a menu.
  - [Carousel](/docs/components/carousel): Shows one slide at a time from a short set, like news, tour steps or reviews, with previous and next buttons and a row of dots. Anything people must read belongs on the page, not on slide 3.

  - **Overlays**
  - [Dialog](/docs/components/dialog): A window over the page for one focused task, like editing a profile or inviting people. Focus moves in when it opens, stays inside, and goes back when it closes.
  - [AlertDialog](/docs/components/alert-dialog): Interrupts to confirm a decision that is hard to undo, like deleting a project or sending an email to thousands of people. Focus starts on the safe choice, and an outside click doesn't close it.
  - [Drawer](/docs/components/drawer): A panel that slides in from an edge of the screen for a task that keeps the page in view, like filters, details or a cart. It is modal; for a short decision, use a dialog.
  - [Popover](/docs/components/popover): A small panel that opens next to a button and holds interactive content, like a short form, a few settings or links. It doesn't block the page; for a plain label, use a tooltip.
  - [HoverCard](/docs/components/hover-card): A preview of what a link points to, shown when people hover or focus it. Use it for profiles and page previews, and keep everything it shows on the page the link opens.
  - [Toggletip](/docs/components/toggletip): A small button that shows a short explanation when clicked. Use it next to a label, a table header or a setting whose meaning isn't obvious; it works with touch, keyboard and screen readers.
  - [Menu](/docs/components/menu): A list of actions that opens from a button. Use it to tuck away secondary actions on a row, a card or a toolbar, not to navigate or to pick a value.
  - [Context menu](/docs/components/context-menu): The actions for one thing, opened with a right-click, a long press or the keyboard. It is a shortcut, so every action in it also needs a visible way in.

  - **Navigation**
  - [Tabs](/docs/components/tabs): Switches between views of the same thing, like the details, items and history of one order, without leaving the page. Only one panel shows at a time.
  - [Accordion](/docs/components/accordion): A stack of headings that each open a section in place, for long content people read one part of at a time, like an FAQ. Collapsible is the single version, for one show/hide.
  - [Breadcrumb](/docs/components/breadcrumb): Shows where the current page sits in the site's hierarchy and links to each level above it. It is a map of the structure, not a record of where people have been.
  - [Pagination](/docs/components/pagination): Moves through a long list one page at a time and shows where people are in it. Page numbers are links for pages a search engine should find, or buttons for a list that lives in the browser.
  - [Navigation menu](/docs/components/navigation-menu): The main links of a site, in a `<nav>`, with optional panels that open from a trigger, such as a products mega menu. It takes people to pages; for commands, use a Menu or a Menubar.
  - [Menubar](/docs/components/menubar): A row of menus, like File, Edit and View in a desktop app. Use it only in app-like screens with many commands, such as an editor; on a regular web page, a toolbar or a few menu buttons are easier to find.
  - [Toolbar](/docs/components/toolbar): A row of related controls, such as the formatting buttons of an editor, that takes one Tab stop. The arrow keys move between them.
  - [Stepper](/docs/components/stepper): Shows where people are in a flow with a fixed order, such as a checkout or a sign-up, and how much is left. It is a numbered list, not navigation.
  - [CommandPalette](/docs/components/command-palette): A search box in a dialog that finds and runs commands, pages and records by name. It speeds up people who use the app every day; everything in it also needs a visible path.

  - **Layout and app**
  - [Box](/docs/components/box): A plain element that renders the tag you choose with `as`. Use it when a block needs the right meaning (a section, an article, a list) and nothing else.
  - [Stack](/docs/components/stack): Lays its children out in one column or one row, with a gap from the spacing scale. Use it for forms, toolbars, lists and anything that flows in one direction.
  - [Grid](/docs/components/grid): Lays its children out in rows and columns that line up. Use it for dashboards, card lists, galleries and forms with fields side by side; for one direction only, use a Stack.
  - [Container](/docs/components/container): Centres a page's content and caps its width, with padding at the sides so text never touches the edge of a phone. Four sizes, from a 40rem reading column to an 80rem dashboard.
  - [AspectRatio](/docs/components/aspect-ratio): Keeps a box at a fixed proportion, like 16:9 or 1:1, at any width. Use it for videos, embeds, maps and thumbnails, so the space is reserved before the media loads and every card in a row lines up.
  - [ScrollArea](/docs/components/scroll-area): A box with a fixed size whose content scrolls natively — wheel, touch and keyboard — with scrollbars drawn by the skin. Use it for a chat history, a long list in a card or a table wider than the screen.
  - [Splitter](/docs/components/splitter): Two panels with a handle between them that people drag, or move with the keyboard, to share the space. Use it in work-heavy screens like a mail client, an editor with a preview or a query tool.
  - [Sidebar](/docs/components/sidebar): The app's main navigation, down the left edge. Named groups of links, the current page marked, counts for what is waiting, and a rail of icons when space is short.
  - [AppShell](/docs/components/app-shell): The frame of an app screen. A header, the page's main area and an optional footer, in a column the height of the screen, with a skip link to jump past the header.
  - [StyleProvider](/docs/components/style-provider): Sets the skin, the color mode and the brand color for everything inside it. Put one at the root of your app, and nest more for islands that look different, like a dark card or a tenant's brand.
  - [DirectionProvider](/docs/components/direction-provider): Tells the components that the text reads right to left, so sliders, tabs, toolbars and popups follow it. Use it with dir on an element, for Arabic, Hebrew, Persian or Urdu.
  - [VisuallyHidden](/docs/components/visually-hidden): Text that screen readers read but the screen doesn't show. Use it to add context that sighted people get from the layout, like which invoice an "Edit" link belongs to, or to announce a change.
- Guides
  - [Accessibility](/docs/guides/accessibility): What every Camaleo component guarantees in every skin, how it is tested, and the measured contrast of each skin's colors.
  - [Brand color](/docs/guides/brand-color): Pass one color and get an 11-step scale with readable text on every step. Each skin decides where the brand shows up.
  - [Create a skin](/docs/guides/create-a-skin): A skin is one CSS file. Set token values under your skin's name in the cml.style layer, add a few scoped rules if you need them, and check the contrast in both modes.
  - [Dark mode](/docs/guides/dark-mode): Light, dark or the system's choice, per page or per island. Dark mode is plain CSS, so the first paint is already right.
  - [FAQ](/docs/guides/faq): Short answers to the questions people ask before and after installing Camaleo.
  - [Forms](/docs/guides/forms): Build forms that tell people what went wrong and where. Field wiring, validation, an error summary and the react-hook-form recipe.
  - [Languages & RTL](/docs/guides/i18n): Translate the texts the components bring with them, set the locale of the date components and run any skin right to left.
  - [Scoped overrides](/docs/guides/scoped-overrides): Change one area, one skin or one part without touching the rest. Tokens on an element, @scope rules and nested providers, and how the cml.* layers decide who wins.
  - [Skins & switching](/docs/guides/skins): Thirteen complete design languages over the same components. Load the CSS, wrap the app in a StyleProvider and change one word to change all of it.
  - [Server Components and SSR](/docs/guides/ssr): Camaleo renders on the server with the skin already applied. No theme script, no flash, and most layout pieces stay Server Components.
  - [Tailwind CSS](/docs/guides/tailwind): Use Camaleo next to Tailwind CSS v4. Put the layers in the right order, turn the tokens into utilities and let the skin keep its job.
  - [Tokens](/docs/guides/tokens): Every skin is a set of --cml-* custom properties. Change one and every component that reads it follows, in every skin.
- All 13 skins
  - [All 13 skins](/docs/skins): Thirteen complete looks in four families. Each card is live, in its own skin, with the mode and brand from the preview bar.
  - [Clay](/docs/skins/clay): Puffy pastel shapes that look moulded from modelling clay. Friendly and tactile.
  - [Compare side by side](/docs/skins/compare): The same card in several skins at once, with the mode and brand from the preview bar. Pick up to six and choose by looking.
  - [Cupertino](/docs/skins/cupertino): Inspired by Apple’s Human Interface Guidelines: hairlines, grouped lists and continuous corners.
  - [Editorial](/docs/skins/editorial): Reads like a magazine. Serif text, display headings, hairline rules.
  - [Glass](/docs/skins/glass): Frosted, translucent layers over soft color. Light, airy, a little luxurious.
  - [Material](/docs/skins/material): Inspired by Material Design 3: tonal surfaces from one brand color and pill-shaped buttons.
  - [Minimal](/docs/skins/minimal): Quiet and neutral. It gets out of the way of your content.
  - [Neubrutalism](/docs/skins/neubrutalism): Thick ink lines, hard shadows and loud color. Proudly unpolished.
  - [Neumorphism](/docs/skins/neumorphism): One surface shaped by light: raised for actions, sunken for inputs.
  - [Progressive](/docs/skins/progressive): A neutral installable-app look, warm and modern, without borrowing any platform.
  - [Retro pixel](/docs/skins/retro-pixel): 8-bit edges: 4px pixel borders, stepped corners, chunky type.
  - [Retro](/docs/skins/retro): The classic desktop, rebuilt with real contrast and keyboard support.
  - [Swiss](/docs/skins/swiss): Grid, type and nothing else. Hierarchy comes from size and weight.
  - [Y2K](/docs/skins/y2k): Millennium plastic and chrome: glossy jelly buttons and Aqua pinstripes.

# Docs

- [Documentação](/pt-br/docs): Tudo o que você precisa para usar o Camaleo — instalação, os treze estilos, todos os componentes e como deixá-lo com a sua cara. Todo exemplo de toda página veste o estilo que você escolher na barra acima.
- [Changelog](/pt-br/docs/changelog): O que mudou no Camaleo, do mais novo para o mais antigo. Nada foi publicado no npm ainda; tudo abaixo leva até a 1.0.
- [Personalizador de tema](/pt-br/docs/customizer): Escolha um estilo, uma cor de marca e alguns tokens, veja componentes reais mudarem e leve o CSS, o provider e um preset JSON.
- [Instalação](/pt-br/docs/installation): Dois pacotes, um arquivo CSS por estilo e um StyleProvider. Funciona com o App Router do Next.js, com o Vite e com qualquer app React 19.
- Exemplos
  - [Exemplos](/pt-br/docs/blocks): Exemplos são telas completas feitas só com componentes do Camaleo. Cada uma roda ao vivo no estilo, modo e cor da barra de visualização, e o código é o arquivo que roda: abra uma para ver na largura de desktop, tablet e celular e copiar o código.
  - [Tabela de admin](/pt-br/docs/blocks/admin-table): Uma tabela de membros da equipe com pesquisa, filtros, ordenação, seleção com ações em lote, paginação, menu por linha, edição numa gaveta e confirmação de exclusão.
  - [Entrar](/pt-br/docs/blocks/auth): Login, cadastro e redefinição de senha num card só, com mostrar e ocultar senha, validação, etapa de código de uso único, link mágico e chave de acesso.
  - [Checkout](/pt-br/docs/blocks/checkout): Um checkout em quatro etapas com resumo do pedido, validação de endereço, opções de frete, dados do cartão, revisão e confirmação.
  - [Dashboard de vendas](/pt-br/docs/blocks/dashboard): Dashboard de vendas de uma loja: app shell com menu lateral recolhível, números com variação, gráfico de receita feito com tokens, vendas por canal e tabela de pedidos ordenável com filtro de canal.
  - [Caixa de entrada](/pt-br/docs/blocks/inbox): Uma caixa de e-mail com pastas, estado de não lida, seleção múltipla com ações em lote, pesquisa, painel de leitura, estados vazios e navegação pelo teclado.
  - [Landing de produto](/pt-br/docs/blocks/landing): Landing page de produto: cabeçalho com menu que se recolhe em telas pequenas, hero com uma prévia do produto, logos e números, grade de recursos, depoimento, chamada de preços, perguntas frequentes, chamada para cadastro e rodapé.
  - [Preços](/pt-br/docs/blocks/pricing): Página de preços com uma chave mensal ou anual que muda todos os valores, três planos com o mais escolhido em destaque, tabela comparativa e perguntas sobre cobrança.
  - [Configurações da conta](/pt-br/docs/blocks/settings): Configurações da conta dentro do shell do app, em quatro seções: perfil com envio de foto e validação, chaves de notificação, troca de senha com ativação da verificação em duas etapas e uma zona de perigo que pede confirmação.
  - [Cadastro em etapas](/pt-br/docs/blocks/signup): Cadastro em três etapas com Stepper, validação em cada etapa, resumo de erros com link para cada campo, etapa de revisão com links de edição e tela de sucesso.
- Componentes

  - **Ações**
  - [Button](/pt-br/docs/components/button): Botão que dispara uma ação. Quatro variantes e quatro tamanhos, um estado de carregamento que mantém o foco e um visual que vem inteiro do estilo ativo.
  - [Toggle](/pt-br/docs/components/toggle): Botão de alternância, que fica pressionado, como o Negrito num editor. O ToggleGroup junta vários, com um ou muitos pressionados e navegação pelas setas.
  - [Spinner](/pt-br/docs/components/spinner): Indicador giratório que mostra que algo está carregando quando não dá para dizer quanto falta. Anuncia o rótulo ao leitor de tela e herda a cor e o tamanho do texto.

  - **Formulários**
  - [Field](/pt-br/docs/components/field): Campo que envolve um controle de formulário com rótulo, descrição e erro, liga tudo para as tecnologias assistivas e acompanha a validade. Vem com Input, Textarea, Label e Fieldset.
  - [Select](/pt-br/docs/components/select): Lista suspensa para escolher uma opção, ou algumas, de uma lista que fica fechada até ser necessária. O popup acompanha o estilo pelo portal e abre pelo teclado tanto quanto pelo mouse.
  - [Native select](/pt-br/docs/components/native-select): Seleção nativa — o select do próprio navegador, com o visual do estilo. Ideal para listas longas e conhecidas e no celular, onde abre o seletor do sistema.
  - [Combobox](/pt-br/docs/components/combobox): Caixa de combinação — um campo de texto que filtra uma lista enquanto você digita. Use quando houver opções demais para rolar, ou quando a pessoa já sabe o nome do que procura.
  - [Checkbox](/pt-br/docs/components/checkbox): Caixa de seleção que liga ou desliga uma opção, ou escolhe quantas quiser de uma lista. O CheckboxGroup guarda os valores num array e pode controlar uma caixa de "selecionar todos".
  - [Radio group](/pt-br/docs/components/radio-group): Grupo de botões de rádio para uma escolha entre poucas opções, todas visíveis ao mesmo tempo. O grupo é uma única parada de tabulação; as setas movem e selecionam.
  - [Switch](/pt-br/docs/components/switch): Interruptor que liga ou desliga um ajuste, e o efeito vale na hora. Para escolhas que esperam um botão Salvar, use um Checkbox.
  - [Slider](/pt-br/docs/components/slider): Controle deslizante que define um valor, ou um intervalo, arrastando ao longo de uma trilha. Ideal para quantidades aproximadas, em que ver a posição importa mais do que digitar um número exato.
  - [Number field](/pt-br/docs/components/number-field): Campo numérico com botões de menos e mais. Mantém o valor dentro dos limites, avança pelo teclado e formata como moeda, porcentagem ou unidade.

  - **Formulário avançado**
  - [Input group](/pt-br/docs/components/input-group): Grupo de entrada — uma caixa de campo em volta de um input e dos textos, ícones ou botões que fazem parte dele. PasswordInput e SearchInput são grupos prontos para os dois casos mais comuns.
  - [OTP field](/pt-br/docs/components/otp-field): Campo para um código de uso único, dividido em uma casa por caractere. Digitar avança, Backspace volta, e colar ou o preenchimento automático do SMS completa todas as casas de uma vez.
  - [TagsInput](/pt-br/docs/components/tags-input): Campo de etiquetas — vários valores curtos num só campo, mostrados como chips removíveis. Use para tópicos, etiquetas, competências ou destinatários de e-mail, com ou sem lista de sugestões.
  - [Envio de arquivos](/pt-br/docs/components/file-upload): Envio de arquivos — uma área para soltar arquivos com um input de arquivo de verdade atrás de um botão, mais uma lista com o progresso, o resultado ou o erro de cada arquivo. Ela entrega os arquivos; enviar é com o seu app.
  - [Rating](/pt-br/docs/components/rating): Avaliação com estrelas para dar uma nota ou mostrar uma média. Interativo, funciona como um grupo de rádios; somente leitura, é uma única imagem com nome em texto e aceita meias estrelas.
  - [Chip](/pt-br/docs/components/chip): Chips — escolhas compactas que filtram uma lista, ou pequenos valores removíveis, como pessoas e etiquetas. O ChipGroup reúne chips de filtro sob um nome, com navegação pelas setas.
  - [Error summary](/pt-br/docs/components/error-summary): Resumo de erros que lista os campos inválidos no topo de um formulário depois de um envio com erro, cada um como um link que leva o foco ao controle. Use em formulários com mais de dois ou três campos.

  - **Datas**
  - [Calendar](/pt-br/docs/components/calendar): Calendário que mostra um mês e deixa a pessoa escolher um dia com mouse, toque ou teclado. Use quando a data está próxima e ver a semana ajuda, como numa consulta ou numa entrega.
  - [Range calendar](/pt-br/docs/components/range-calendar): Calendário de intervalo que mostra um mês e deixa a pessoa escolher um dia de início e um de fim em dois cliques. Use para hospedagens, viagens, férias e períodos de relatório.
  - [Date picker](/pt-br/docs/components/date-picker): Seletor de data — um campo em que você digita ou escolhe num calendário. Use para datas próximas de hoje, como uma entrega, uma reserva ou um prazo.
  - [Date range picker](/pt-br/docs/components/date-range-picker): Seletor de intervalo de datas — início e fim num só campo, digitadas ou escolhidas num calendário de intervalo. Use para hospedagens, férias, relatórios e tudo que dura mais de um dia.
  - [Date field](/pt-br/docs/components/date-field): Campo de data que recebe uma data digitada em segmentos de dia, mês e ano, na ordem e no formato do idioma. Para datas que a pessoa já sabe, como aniversário ou início de contrato, sem um calendário no caminho.
  - [Time field](/pt-br/docs/components/time-field): Campo de hora que recebe um horário digitado em segmentos de hora e minuto, no relógio do idioma. Leva o fuso horário quando o valor tem um, então uma reunião às 14:00 é o mesmo momento para todo mundo.

  - **Feedback**
  - [Alert](/pt-br/docs/components/alert): Alerta — uma mensagem que fica na página até a situação mudar. Use para o que a pessoa precisa saber ou resolver ali mesmo, onde está trabalhando.
  - [Toast](/pt-br/docs/components/toast): Notificação (toast) — um retorno curto depois de uma ação, que aparece num canto da tela e some em poucos segundos. Use para confirmar o que aconteceu sem tirar a pessoa do que ela está fazendo.
  - [Progress](/pt-br/docs/components/progress): Barra de progresso que mostra quanto de uma tarefa já foi feito, como um envio, uma exportação ou uma configuração. Para uma medida que só fica dentro de uma faixa, como o armazenamento usado, use o Meter.
  - [Meter](/pt-br/docs/components/meter): Medidor que mostra uma medida dentro de uma faixa conhecida, como o armazenamento usado, as vagas ocupadas ou a força de uma senha. Para uma tarefa que caminha até terminar, como um envio, use o Progress.
  - [Skeleton](/pt-br/docs/components/skeleton): Esqueleto — um espaço reservado discreto, no formato do conteúdo que está chegando. Use quando você já conhece o layout, para a página não pular quando os dados aparecerem.
  - [Tooltip](/pt-br/docs/components/tooltip): Dica (tooltip) — um rótulo curto que aparece quando a pessoa passa o mouse ou dá foco num controle. Use para dar nome a botões de ícone e mostrar atalhos, nunca para informação que a pessoa precisa.

  - **Exibição**
  - [Badge](/pt-br/docs/components/badge): Selo que mostra um status, uma contagem ou uma categoria em uma ou duas palavras, ao lado de um título ou numa linha de tabela. É só texto; se a pessoa precisa clicar ou remover, use um Chip.
  - [Avatar](/pt-br/docs/components/avatar): Avatar — a foto de uma pessoa, ou as iniciais dela quando não há foto. Use ao lado do nome em comentários, listas e perfis, para as pessoas se reconhecerem mais rápido.
  - [Card](/pt-br/docs/components/card): Cartão — uma caixa que reúne um assunto só, como um plano, um projeto ou uma configuração, com título, conteúdo e ações. Use quando a pessoa compara ou passa os olhos por vários deles lado a lado.
  - [Kbd](/pt-br/docs/components/kbd): Tecla — mostra uma tecla ou um atalho, como Ctrl K, no texto, num menu ou numa dica. Ele só exibe as teclas; o atalho em si fica por sua conta.
  - [Table](/pt-br/docs/components/table): Tabela que mostra registros em linhas e colunas para a pessoa comparar, como faturas ou estoque. Para ordenar, filtrar e paginar dados, use Data table.
  - [Typography](/pt-br/docs/components/typography): Tipografia — títulos e parágrafos com a fonte do estilo. O Heading separa a tag, que vem da estrutura da página, do tamanho, que vem do espaço disponível.
  - [Separator](/pt-br/docs/components/separator): Separador — uma linha fina entre grupos de conteúdo ou de botões. Use quando só o espaço não deixa os grupos claros.
  - [Link](/pt-br/docs/components/link): Link que leva a pessoa para outra página, para uma parte desta página ou para um arquivo. Para ações como salvar, copiar ou excluir, use Button.

  - **Exibição de dados**
  - [DataTable](/pt-br/docs/components/data-table): Tabela de dados montada a partir dos dados e das colunas, com ordenação, seleção de linhas, páginas e estado de carregamento prontos. Para uma tabela fixa escrita à mão, use Table.
  - [DataList](/pt-br/docs/components/data-list): Lista de dados com pares de rótulo e valor para os detalhes de um registro, como um pedido, um perfil ou um servidor. Para comparar vários registros, use uma tabela.
  - [Stat](/pt-br/docs/components/stat): Estatística — mostra um número importante, o que ele mede e quanto mudou, como a receita do mês. Use uma fileira deles no topo de um painel.
  - [Timeline](/pt-br/docs/components/timeline): Linha do tempo que lista eventos na ordem em que aconteceram, como as etapas de uma entrega ou o histórico de um chamado. Cada evento tem título, detalhes e horário.
  - [Empty state](/pt-br/docs/components/empty-state): Estado vazio que ocupa uma página, um card ou uma lista que ainda não tem nada para mostrar. Diz o que está vazio, por quê, e o que fazer em seguida.
  - [Image](/pt-br/docs/components/image): Imagem — mostra uma foto numa moldura, com legenda opcional, um skeleton durante o carregamento e um substituto que mantém o layout quando o arquivo não carrega.
  - [ProgressCircle](/pt-br/docs/components/progress-circle): Progresso circular — um anel que mostra quanto uma tarefa já avançou, do tamanho certo para cards, blocos e barras de ferramentas. Quando houver espaço para uma barra inteira, use Progress.
  - [CodeBlock](/pt-br/docs/components/code-block): Bloco de código que mostra um trecho com o nome do arquivo, os números de linha e um botão de copiar, para passos de instalação, referências de API e guias de configuração.
  - [TreeView](/pt-br/docs/components/tree-view): Visão em árvore — mostra itens que ficam um dentro do outro, como pastas e arquivos ou categorias, para a pessoa abrir um ramo e escolher um item. Para uma lista simples, use uma lista ou um menu.
  - [Carousel](/pt-br/docs/components/carousel): Carrossel que mostra um slide por vez de um conjunto curto, como novidades, passos de um tour ou avaliações, com botões de anterior e próximo e uma fileira de pontos. O que a pessoa precisa ler fica na página, não no slide 3.

  - **Sobreposições**
  - [Dialog](/pt-br/docs/components/dialog): Diálogo — uma janela sobre a página para uma tarefa focada, como editar um perfil ou convidar pessoas. O foco entra quando ela abre, fica dentro dela e volta quando ela fecha.
  - [AlertDialog](/pt-br/docs/components/alert-dialog): Diálogo de alerta que interrompe para confirmar uma decisão difícil de desfazer, como excluir um projeto ou mandar um e-mail para milhares de pessoas. O foco começa na escolha segura, e um clique fora não fecha.
  - [Drawer](/pt-br/docs/components/drawer): Gaveta — um painel que desliza de uma borda da tela para uma tarefa que mantém a página à vista, como filtros, detalhes ou um carrinho. Ele é modal; para uma decisão rápida, use um diálogo.
  - [Popover](/pt-br/docs/components/popover): Balão (popover) — um painel pequeno que abre ao lado de um botão e guarda conteúdo interativo, como um formulário curto, algumas configurações ou links. Ele não bloqueia a página; para um rótulo simples, use um tooltip.
  - [HoverCard](/pt-br/docs/components/hover-card): Cartão flutuante com uma prévia do destino de um link, que aparece quando a pessoa passa o mouse ou dá foco nele. Use para perfis e prévias de página, e deixe tudo o que ele mostra também na página que o link abre.
  - [Toggletip](/pt-br/docs/components/toggletip): Dica por clique — um botão pequeno que mostra uma explicação curta quando clicado. Use ao lado de um rótulo, de um cabeçalho de tabela ou de uma configuração cujo sentido não é óbvio; funciona com toque, teclado e leitor de tela.
  - [Menu](/pt-br/docs/components/menu): Menu — uma lista de ações que abre a partir de um botão. Use para guardar as ações secundárias de uma linha, um card ou uma barra de ferramentas, não para navegar nem para escolher um valor.
  - [Menu de contexto](/pt-br/docs/components/context-menu): Menu de contexto com as ações de uma coisa só, abertas com o clique direito, um toque longo ou o teclado. É um atalho, então toda ação nele também precisa de um caminho visível.

  - **Navegação**
  - [Tabs](/pt-br/docs/components/tabs): Abas que alternam entre visões da mesma coisa, como os itens, a entrega e o histórico de um pedido, sem sair da página. Só um painel aparece por vez.
  - [Accordion](/pt-br/docs/components/accordion): Sanfona (acordeão) — uma pilha de títulos que abrem cada um a sua seção no lugar, para conteúdo longo que se lê por partes, como um FAQ. O Collapsible é a versão única, para um só mostrar/esconder.
  - [Breadcrumb](/pt-br/docs/components/breadcrumb): Trilha de navegação que mostra onde a página atual fica na hierarquia do site e leva a cada nível acima dela. É um mapa da estrutura, não um registro de por onde a pessoa passou.
  - [Pagination](/pt-br/docs/components/pagination): Paginação — percorre uma lista longa uma página por vez e mostra onde a pessoa está nela. Os números são links para páginas que um buscador deve encontrar, ou botões para uma lista que vive no navegador.
  - [Navigation menu](/pt-br/docs/components/navigation-menu): Menu de navegação com os links principais de um site, num `<nav>`, com painéis opcionais que abrem a partir de um gatilho, como um mega menu de produtos. Ele leva a páginas; para comandos, use um Menu ou uma Menubar.
  - [Menubar](/pt-br/docs/components/menubar): Barra de menus — uma fileira de menus, como Arquivo, Editar e Exibir num programa de computador. Use só em telas com cara de aplicativo e muitos comandos, como um editor; numa página comum, uma barra de ferramentas ou alguns botões de menu são mais fáceis de achar.
  - [Toolbar](/pt-br/docs/components/toolbar): Barra de ferramentas — uma fileira de controles relacionados, como os botões de formatação de um editor, que ocupa uma só parada do Tab. As setas andam entre eles.
  - [Stepper](/pt-br/docs/components/stepper): Indicador de etapas que mostra em que ponto a pessoa está de um fluxo com ordem fixa, como uma compra ou um cadastro, e quanto falta. É uma lista numerada, não uma navegação.
  - [CommandPalette](/pt-br/docs/components/command-palette): Paleta de comandos — uma busca dentro de um diálogo que encontra e executa comandos, páginas e registros pelo nome. Agiliza quem usa o app todo dia; tudo o que está nela também precisa de um caminho visível.

  - **Layout e app**
  - [Box](/pt-br/docs/components/box): Caixa — um elemento simples que renderiza a tag que você escolhe com `as`. Use quando um bloco precisa do significado certo (uma seção, um artigo, uma lista) e de mais nada.
  - [Stack](/pt-br/docs/components/stack): Pilha que organiza os filhos numa coluna ou numa linha, com um espaço da escala de espaçamento. Use para formulários, barras de ações, listas e tudo que corre numa direção só.
  - [Grid](/pt-br/docs/components/grid): Grade que organiza os filhos em linhas e colunas que se alinham. Use para dashboards, listas de cards, galerias e formulários com campos lado a lado; para uma direção só, use um Stack.
  - [Container](/pt-br/docs/components/container): Contêiner que centraliza o conteúdo da página e limita a largura, com margem nas laterais para o texto nunca encostar na borda do celular. Quatro tamanhos, de uma coluna de leitura de 40rem a um dashboard de 80rem.
  - [AspectRatio](/pt-br/docs/components/aspect-ratio): Proporção fixa — mantém uma caixa numa proporção fixa, como 16:9 ou 1:1, em qualquer largura. Use em vídeos, embeds, mapas e miniaturas, para o espaço ficar reservado antes de a mídia carregar e os cards de uma linha se alinharem.
  - [ScrollArea](/pt-br/docs/components/scroll-area): Área de rolagem — uma caixa de tamanho fixo cujo conteúdo rola de forma nativa — roda do mouse, toque e teclado — com barras de rolagem desenhadas pelo estilo. Use para um histórico de conversa, uma lista longa num card ou uma tabela mais larga que a tela.
  - [Splitter](/pt-br/docs/components/splitter): Divisor — dois painéis com uma alça entre eles, que a pessoa arrasta ou move pelo teclado para dividir o espaço. Use em telas de trabalho, como um cliente de e-mail, um editor com prévia ou uma ferramenta de consultas.
  - [Sidebar](/pt-br/docs/components/sidebar): Barra lateral com a navegação principal do app, na borda esquerda. Grupos de links com nome, a página atual marcada, contadores do que está esperando e uma faixa de ícones quando falta espaço.
  - [AppShell](/pt-br/docs/components/app-shell): Estrutura do app — a moldura de uma tela. Um cabeçalho, a área principal da página e um rodapé opcional, numa coluna da altura da tela, com um link para pular o cabeçalho.
  - [StyleProvider](/pt-br/docs/components/style-provider): Provedor que define o estilo, o modo de cor e a cor da marca de tudo o que está dentro dele. Coloque um na raiz do app e aninhe outros para criar ilhas com outra cara, como um card escuro ou a marca de um cliente.
  - [DirectionProvider](/pt-br/docs/components/direction-provider): Provedor de direção que avisa os componentes que o texto é lido da direita para a esquerda, para que sliders, abas, barras de ferramentas e popups sigam essa direção. Use junto com dir num elemento, para árabe, hebraico, persa ou urdu.
  - [VisuallyHidden](/pt-br/docs/components/visually-hidden): Texto oculto, que o leitor de tela lê mas a tela não mostra. Use para dar o contexto que quem enxerga tira do layout, como a qual fatura um link "Editar" pertence, ou para anunciar uma mudança.
- Guias
  - [Acessibilidade](/pt-br/docs/guides/accessibility): O que todo componente do Camaleo garante em todos os estilos, como isso é testado e o contraste medido das cores de cada estilo.
  - [Cor da marca](/pt-br/docs/guides/brand-color): Passe uma cor e receba uma escala de 11 passos com texto legível em cada um. Cada estilo decide onde a marca aparece.
  - [Criar um estilo](/pt-br/docs/guides/create-a-skin): Um estilo é um arquivo CSS. Defina valores de token com o nome do seu estilo na camada cml.style, acrescente algumas regras com escopo se precisar e confira o contraste nos dois modos.
  - [Modo escuro](/pt-br/docs/guides/dark-mode): Claro, escuro ou o que o sistema escolher, por página ou por ilha. O modo escuro é CSS puro, então a primeira pintura já sai certa.
  - [Perguntas frequentes](/pt-br/docs/guides/faq): Respostas curtas para as perguntas que aparecem antes e depois de instalar o Camaleo.
  - [Formulários](/pt-br/docs/guides/forms): Monte formulários que dizem o que deu errado e onde. A ligação do Field, a validação, o resumo de erros e a receita com react-hook-form.
  - [Idiomas e RTL](/pt-br/docs/guides/i18n): Traduza os textos que os componentes trazem, defina o locale dos componentes de data e use qualquer estilo da direita para a esquerda.
  - [Sobrescritas com escopo](/pt-br/docs/guides/scoped-overrides): Mude uma área, um estilo ou uma parte sem mexer no resto. Tokens num elemento, regras @scope e providers aninhados, e como as camadas cml.* decidem quem vence.
  - [Estilos e troca](/pt-br/docs/guides/skins): Treze linguagens visuais completas sobre os mesmos componentes. Carregue o CSS, envolva o app num StyleProvider e troque uma palavra para mudar tudo.
  - [Server Components e SSR](/pt-br/docs/guides/ssr): O Camaleo renderiza no servidor com o estilo já aplicado. Sem script de tema, sem piscar, e a maior parte das peças de layout continua Server Component.
  - [Tailwind CSS](/pt-br/docs/guides/tailwind): Use o Camaleo junto com o Tailwind CSS v4. Ponha as camadas na ordem certa, transforme os tokens em utilitários e deixe o estilo fazer o trabalho dele.
  - [Tokens](/pt-br/docs/guides/tokens): Todo estilo é um conjunto de custom properties --cml-*. Mude uma e todo componente que a lê acompanha, em todos os estilos.
- Todos os 13 estilos
  - [Todos os 13 estilos](/pt-br/docs/skins): Treze visuais completos em quatro famílias. Cada cartão é real, no próprio estilo, com o modo e a cor da marca da barra de pré-visualização.
  - [Clay](/pt-br/docs/skins/clay): Formas fofas em tons pastel, como se fossem de massinha. Simpático e tátil.
  - [Comparar lado a lado](/pt-br/docs/skins/compare): O mesmo cartão em vários estilos ao mesmo tempo, com o modo e a cor da marca da barra de pré-visualização. Escolha até seis e decida olhando.
  - [Cupertino](/pt-br/docs/skins/cupertino): Inspirado nas Human Interface Guidelines da Apple: fios finos, listas agrupadas e cantos contínuos.
  - [Editorial](/pt-br/docs/skins/editorial): Lê-se como uma revista. Texto serifado, títulos de display, fios finos.
  - [Glass](/pt-br/docs/skins/glass): Camadas foscas e translúcidas sobre cor suave. Leve, arejado, um pouco luxuoso.
  - [Material](/pt-br/docs/skins/material): Inspirado no Material Design 3: superfícies tonais a partir de uma cor de marca e botões em pílula.
  - [Minimal](/pt-br/docs/skins/minimal): Discreto e neutro. Sai da frente do seu conteúdo.
  - [Neubrutalism](/pt-br/docs/skins/neubrutalism): Contornos grossos de tinta, sombras duras e cores berrantes. Orgulhosamente cru.
  - [Neumorphism](/pt-br/docs/skins/neumorphism): Uma superfície moldada pela luz: em relevo para ações, afundada para campos.
  - [Progressive](/pt-br/docs/skins/progressive): Um visual neutro de app instalável, quente e moderno, sem copiar nenhuma plataforma.
  - [Retro pixel](/pt-br/docs/skins/retro-pixel): Bordas 8-bit: contornos de pixel de 4px, cantos em degrau, letras grossas.
  - [Retro](/pt-br/docs/skins/retro): O desktop clássico, refeito com contraste de verdade e suporte a teclado.
  - [Swiss](/pt-br/docs/skins/swiss): Grade, tipografia e mais nada. A hierarquia vem do tamanho e do peso.
  - [Y2K](/pt-br/docs/skins/y2k): Plástico e cromo da virada do milênio: botões de gelatina brilhantes e listras Aqua.