Components

Layout

Componentes estruturais essenciais para organizar o layout da sua aplicação e estabelecer uma base consistente para a sua UI.

App

Envolve o seu app para fornecer configurações globais e mais.

Container

Um container permite centralizar e limitar a largura do seu conteúdo.

Error

Um componente de erro pronto para uso com suporte ao NuxtError.

Footer

Um componente de footer responsivo.

Header

Um componente de header responsivo.

Main

Um elemento principal que preenche a altura disponível da viewport.

Sidebar

Uma sidebar recolhível com várias variantes visuais.

Theme

Um componente headless para tematizar componentes filhos.

Elemento

Blocos de construção essenciais de UI, incluindo botões, badges, avatares, ícones e outros elementos fundamentais de interface para criar experiências de usuário intuitivas e consistentes.

Alert

Um callout para chamar a atenção do usuário.

Avatar

Um elemento img com fallback e suporte ao Nuxt Image.

AvatarGroup

Empilhe vários avatares em um grupo.

Badge

Um texto curto para representar um status ou uma categoria.

Banner

Exiba um banner no topo do seu site para informar os usuários sobre informações importantes.

Button

Um elemento de botão que pode funcionar como link ou disparar uma ação.

Calendar

Um componente de calendário para selecionar datas únicas, múltiplas datas ou intervalos de datas.

Card

Exiba conteúdo em um card com cabeçalho, corpo e rodapé.

Chip

Um indicador de um valor numérico ou de um estado.

Collapsible

Um elemento recolhível para alternar a visibilidade do seu conteúdo.

FieldGroup

Agrupe vários elementos semelhantes a botões.

Icon

Um componente para exibir qualquer ícone do Iconify ou de outro componente.

Kbd

Um elemento kbd para exibir uma tecla do teclado.

Progress

Um indicador que mostra o progresso de uma tarefa.

Separator

Separa conteúdo na horizontal ou na vertical.

Skeleton

Um placeholder para exibir enquanto o conteúdo está carregando.

Formulário

Componentes completos de formulário para construir experiências interativas de entrada do usuário, incluindo campos de texto, selects, checkboxes, grupos de rádio, switches, sliders e validação completa de formulários.

Checkbox

Um elemento de input para alternar entre os estados marcado e desmarcado.

CheckboxGroup

Um conjunto de botões de checklist para selecionar várias opções em uma lista.

ColorPicker

Um componente para selecionar uma cor.

FileUpload

Um elemento de input para enviar arquivos.

Form

Um componente de formulário com validação e tratamento de envio embutidos.

FormField

Um wrapper para elementos de formulário que fornece validação e tratamento de erros.

Input

Um elemento de input para digitar texto.

InputDate

Um componente de input para seleção de data.

InputMenu

Um campo de autocomplete com sugestões em tempo real.

InputNumber

Um input para valores numéricos com intervalo personalizável.

InputRating

Um componente para exibir e coletar avaliações dos usuários.

InputTags

Um elemento de input que exibe tags interativas.

InputTime

Um input para selecionar um horário.

Listbox

Uma lista selecionável de itens com busca, virtualização e renderização rica de itens.

PinInput

Um elemento de input para digitar um PIN.

RadioGroup

Um conjunto de botões de rádio para selecionar uma única opção em uma lista.

Select

Um elemento de seleção para escolher em uma lista de opções.

SelectMenu

Um elemento de seleção avançado com busca.

Slider

Um input para selecionar um valor numérico dentro de um intervalo.

Switch

Um controle que alterna entre dois estados.

Textarea

Um elemento textarea para inserir texto de várias linhas.

Dados

Componentes para exibir e organizar dados, incluindo tabelas, accordions, carrosséis, linhas do tempo, árvores e perfis de usuário.

Accordion

Um conjunto empilhado de painéis recolhíveis.

Carousel

Um carrossel com movimento e gestos de deslize construído com o Embla.

Empty

Um componente para exibir um estado vazio.

Marquee

Um componente para criar conteúdo com rolagem infinita.

ScrollArea

Um container de rolagem flexível com suporte a virtualização.

Table

Um elemento de tabela responsivo para exibir dados em linhas e colunas.

Timeline

Um componente que exibe uma sequência de eventos com datas, títulos, ícones ou avatares.

Tree

Um componente de árvore para exibir e interagir com estruturas de dados hierárquicas.

User

Exiba informações do usuário com nome, descrição e avatar.

Navegação

Componentes para navegação e orientação do usuário, incluindo menus, breadcrumbs, paginação, abas, steppers, links e paletas de comandos.

Breadcrumb

Uma hierarquia de links para navegar por um site.

CommandPalette

Uma paleta de comandos com busca em texto completo baseada no Fuse.js para correspondência aproximada eficiente.

FooterColumns

Uma lista de links em colunas para exibir no seu Footer.

Link

Um wrapper em torno de <NuxtLink> com props extras.

NavigationMenu

Uma lista de links que pode ser exibida horizontal ou verticalmente.

Pagination

Uma lista de botões ou links para navegar pelas páginas.

Stepper

Um conjunto de etapas usadas para indicar o progresso em um processo de várias etapas.

Tabs

Um conjunto de painéis de abas exibidos um de cada vez.

Overlay

Elementos de UI flutuantes que aparecem acima do conteúdo principal, incluindo modais, popovers, tooltips, gavetas, slideovers e menus de contexto.

ContextMenu

Um menu para exibir ações ao clicar com o botão direito em um elemento.

Drawer

Uma gaveta que desliza suavemente para dentro e para fora da tela.

DropdownMenu

Um menu para exibir ações ao clicar em um elemento.

Modal

Uma janela de diálogo que pode ser usada para exibir uma mensagem ou solicitar a entrada do usuário.

Popover

Um diálogo não modal que flutua ao redor de um elemento de gatilho.

Slideover

Um diálogo que desliza a partir de qualquer lado da tela.

Toast

Uma mensagem sucinta para fornecer informação ou feedback ao usuário.

Tooltip

Um popup que revela informações ao passar o mouse sobre um elemento.

Página

Seções prontas de marketing e conteúdo para criar landing pages, blogs, páginas de preços e outros materiais de marketing.

AuthForm

Um Form personalizável para criar formulários de login, cadastro ou redefinição de senha.

BlogPost

Um artigo personalizável para exibir em uma página de blog.

BlogPosts

Exiba uma lista de posts de blog em um layout de grade responsivo.

ChangelogVersion

Um artigo personalizável para exibir em um changelog.

ChangelogVersions

Exiba uma lista de versões do changelog em uma linha do tempo.

Page

Um layout em grade para as suas páginas com colunas à esquerda e à direita.

PageAnchors

Uma lista de âncoras para ser exibida na página.

PageAside

Um aside fixo para exibir a navegação da sua página.

PageBody

O conteúdo principal da sua página.

PageCard

Um componente de card pré-estilizado que exibe um título, descrição e link opcional.

PageColumns

Um sistema de layout responsivo em múltiplas colunas para organizar conteúdo lado a lado.

PageCTA

Uma seção de chamada para ação para exibir nas suas páginas.

PageFeature

Um componente para destacar os principais recursos da sua aplicação.

PageGrid

Um sistema de grade responsivo para exibir conteúdo em um layout flexível.

PageHeader

Um header responsivo para as suas páginas.

PageHero

Um hero responsivo para as suas páginas.

PageLinks

Uma lista de links para ser exibida na página.

PageList

Um layout de lista vertical para exibir conteúdo em formato empilhado.

PageLogos

Uma lista de logos ou imagens para exibir nas suas páginas.

PageSection

Uma seção responsiva para as suas páginas.

PricingPlan

Um plano de preços personalizável para exibir em uma página de preços.

PricingPlans

Exiba uma lista de planos de preços em um layout de grade responsivo.

PricingTable

Um componente de tabela de preços responsivo que exibe planos em níveis com comparação de recursos.

Dashboard

Componentes especializados para construir dashboards dinâmicos com painéis redimensionáveis, sidebars recolhíveis, barras de ferramentas e funcionalidade de busca.

DashboardGroup

Um componente de layout fixo que fornece contexto para componentes de dashboard, com gerenciamento e persistência do estado da sidebar.

DashboardNavbar

Uma navbar responsiva para exibir em um dashboard.

DashboardPanel

Um painel redimensionável para exibir em um dashboard.

DashboardResizeHandle

Uma alça para redimensionar uma sidebar ou painel.

DashboardSearch

Um CommandPalette pronto para adicionar ao seu dashboard.

DashboardSearchButton

Um Button pré-estilizado para abrir o modal do DashboardSearch.

DashboardSidebar

Uma sidebar redimensionável e recolhível para exibir em um dashboard.

DashboardSidebarCollapse

Um Button para recolher a sidebar no desktop.

DashboardSidebarToggle

Um Button para abrir e fechar a sidebar no mobile.

DashboardToolbar

Uma barra de ferramentas para exibir abaixo da navbar em um dashboard.

Chat de IA

Componentes para construir interfaces de conversação e chatbots, com tecnologia do Vercel AI SDK.

ChatMessage

Exiba uma mensagem de chat com ícone, avatar e ações.

ChatMessages

Exiba uma lista de mensagens de chat, projetada para funcionar perfeitamente com o Vercel AI SDK.

ChatPalette

Uma paleta de chat para criar uma interface de chatbot dentro de um overlay.

ChatPrompt

Um Textarea aprimorado para enviar prompts em interfaces de chat de IA.

ChatPromptSubmit

Um Button para enviar prompts de chat com tratamento automático de status.

ChatReasoning

Exiba um processo de raciocínio ou pensamento da IA de forma recolhível.

ChatShimmer

Exiba um efeito de animação shimmer no texto.

ChatTool

Exiba o status de invocação de uma ferramenta de IA de forma recolhível.

Editor 4.3+

Componentes para construir um editor de texto rico com suporte aos tipos de conteúdo markdown, HTML e JSON, com tecnologia do TipTap.

Editor

Um componente de editor de texto rico baseado no TipTap com suporte aos tipos de conteúdo markdown, HTML e JSON.

EditorDragHandle

Uma alça arrastável para reordenar e selecionar blocos no editor.

EditorEmojiMenu

Um menu seletor de emojis que exibe sugestões ao digitar o caractere : no editor.

EditorMentionMenu

Um menu de menções que exibe sugestões de usuários ao digitar um caractere de gatilho no editor.

EditorSuggestionMenu

Um menu de comandos que exibe sugestões de formatação e ações ao digitar o caractere / no editor.

EditorToolbar

Uma barra de ferramentas personalizável para ações do editor que pode ser exibida como menu fixo, bubble ou flutuante.

Conteúdo

Componentes que se integram ao Content para sites de documentação, incluindo sumário, busca, árvores de navegação e links de páginas adjacentes.

ContentNavigation

Um componente de navegação em estilo accordion para organizar os links da página.

ContentSearch

Um CommandPalette pronto para adicionar à sua documentação.

ContentSearchButton

Um Button pré-estilizado para abrir o modal do ContentSearch.

ContentSurround

Um par de links de anterior e próximo para navegar entre as páginas.

ContentToc

Um sumário fixo com destaque automático do link de âncora ativo.

Modo de cor

Componentes que se integram ao Color Mode para alternar o tema entre as preferências claro, escuro e do sistema.

ColorModeAvatar

Um Avatar com uma origem diferente para os modos claro e escuro.

ColorModeButton

Um Button para alternar entre os modos claro e escuro.

ColorModeImage

Um elemento de imagem com uma origem diferente para os modos claro e escuro.

ColorModeSelect

Um Select para alternar entre os modos do sistema, escuro e claro.

ColorModeSwitch

Um switch para alternar entre os modos claro e escuro.

i18n

Componentes que se integram ao i18n para internacionalização e gerenciamento de locales.

LocaleSelect

Um Select para alternar entre locales.