> For the complete documentation index, see [llms.txt](https://lunarie.gitbook.io/lunarie-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lunarie.gitbook.io/lunarie-docs/experiencia-do-usuario/05-componentes.md).

# Componentes

> **Última atualização:** 08/10/2026 Inventário conferido em `src/components` e no uso real pelas telas. O catálogo visual fica no Storybook (ADR-022), e as regras de manutenção estão em [Rotina do Design System](/lunarie-docs/marca/09-rotina-do-design-system.md).

## Base

Os componentes seguem o shadcn/ui, sobre Radix e Tailwind, com os tokens da Lunarie. A maioria tem story no Storybook.

## Mais usados nas telas

| Componente                                                                                     | Usos        | Observação                                                                                            |
| ---------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------- |
| `Button`                                                                                       | 31 arquivos | Variantes em [Padrões de Interface](/lunarie-docs/experiencia-do-usuario/04-padroes-de-interface.md). |
| `Card`                                                                                         | 12          | Seções e blocos de conteúdo.                                                                          |
| `Input`, `Label`                                                                               | 11 e 8      | Todo campo de texto usa o `Input`.                                                                    |
| `Dialog`                                                                                       | 6           | Janelas de tarefa. Confirmações usam o `ConfirmDialog`.                                               |
| `Badge`, `Alert`, `Skeleton`, `Avatar`                                                         | 3 a 5 cada  | Selos de status, avisos, carregamento e foto.                                                         |
| `Select`, `SearchableSelect`, `Checkbox`, `Switch`, `RadioGroup`, `Textarea`                   | 1 a 2 cada  | Campos de formulário.                                                                                 |
| `Progress`, `Sheet`, `Drawer`, `Popover`, `Command`, `Accordion`, `Pagination`, `DropdownMenu` | 1 a 2 cada  | Importação, folhas de ação e menus.                                                                   |
| Toast (Sonner)                                                                                 | Global      | Avisos temporários, montado no layout raiz.                                                           |

## Componentes da Lunarie

| Componente                                                        | Função                                                                                                                         |
| ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `AppSidebar`, `MobileTabBar`, `AppLayout`                         | Navegação e estrutura (ver [Arquitetura de Informação](/lunarie-docs/experiencia-do-usuario/02-arquitetura-de-informacao.md)). |
| `ConfirmDialog`                                                   | Confirmação de ações, no lugar de `window.confirm`.                                                                            |
| `EmptyState`                                                      | Estado vazio com ícone, título, uma linha de explicação e uma ação.                                                            |
| `PasswordStrength`                                                | Força da senha.                                                                                                                |
| `BookRow`, `BookDropZone`, `BookSearchPanel`, `BookPagination`    | Linha de livro, área de soltar arquivos, busca de livros e paginação.                                                          |
| `BookForm`, `BookDetail`                                          | Edição e ficha do livro.                                                                                                       |
| `CoverFallback`                                                   | Capa de reserva com o título sobre o fundo da marca.                                                                           |
| `KindleSentBadge`, `KindleConnectionTest`, `KindleReminderBanner` | Selo de envio, teste de conexão e lembrete do Kindle.                                                                          |
| `ProximaLeituraCard`, `ReadingGoalCard`, `ReadingGoalRing`        | Dashboard: próxima leitura e meta anual.                                                                                       |
| `CompletarComLunarie`, `CompletudeRing`, `PendenciaRows`          | Pendências.                                                                                                                    |
| `OnboardingWizard`                                                | Onboarding de 6 passos.                                                                                                        |

## Instalados e sem uso

Estes componentes existem em `components/ui`, mas nenhuma tela os usa hoje: Tabs, Table, Tooltip, Toggle, Slider, ScrollArea, Resizable, NavigationMenu, Menubar, InputOTP, HoverCard, Form, ContextMenu, Collapsible, Chart, Carousel e Breadcrumb. Seguem disponíveis no Storybook.

## Documentos relacionados

* [Padrões de Interface](/lunarie-docs/experiencia-do-usuario/04-padroes-de-interface.md)
* [Rotina do Design System](/lunarie-docs/marca/09-rotina-do-design-system.md)
* [Decisões Arquiteturais](/lunarie-docs/arquitetura/06-decisoes-arquiteturais.md)