cd/ui

v0.2 · 32 componentes

Componentes leves. Do seu jeito.

React 19, Base UI e Tailwind CSS v4. Acessibilidade desde a base, tamanho medido no build e formulários com Zod. Instale pelo shadcn CLI e edite o código no seu projeto.

instalar cd/ui ver componentes
média em gzip por componente
695 B
zero JS no navegador
9
acessível por padrão
Base UI

Adicione o tema e todos os componentes ao seu projeto com um comando:

$ npx shadcn@latest add https://cd-ui.vercel.app/r/all.json

componentes

Veja o tamanho gzip de cada componente e onde ele roda.

como medimos →

ações

  • Button1.2 kB

    Botão com variantes, tamanhos, estado de carregamento e opção de renderizar como link.

    client

  • Dropdown Menu1.0 kB

    Um menu de ações que abre a partir de um botão, com itens marcáveis, grupos de rádio e submenus.

    client

exibição

  • defaultnewdraftarchivedfailed
    Badge453 B

    Selo compacto pra mostrar status, contagem ou categoria.

    servidor · 0 js

  • loopvet

    in production

    management system for veterinary clinics.

    scheduling, records, and billing on a single screen.
    Card377 B

    Agrupe conteúdo relacionado em cabeçalho, corpo e rodapé.

    servidor · 0 js

  • press Ctrl K to search, or Esc to close.

    Kbd282 B

    Mostre uma tecla ou atalho com visual de tecla.

    servidor · 0 js

  • cd/ui

    lightweight components on Base UI.

    docs
    components
    github
    Separator284 B

    Separe conteúdo com uma linha horizontal ou vertical.

    servidor · 0 js

  • DIABJD
    Avatar383 B

    Uma foto de perfil redonda com um substituto para quando a imagem não existe.

    client

  • cd/uicd/ui
    Logo1.1 kB

    A marca, o wordmark e o prompt de terminal do cd/ui, em três tamanhos.

    client

  • Recent invoices
    InvoiceStatusMethodAmount
    INV-001paidCredit card$250.00
    INV-002pendingBank transfer$150.00
    INV-003failedCredit card$350.00
    Table930 B

    Uma tabela nativa estilizada para linhas e colunas de dados.

    servidor · 0 js

  • A

    Welcome back

    Sign in to continue.

    New here? Create an account
    Auth Shell573 B

    Card centralizado para telas de login, cadastro, redefinição e verificação.

    servidor · 0 js

  • Run the shadcn CLI with the component URL. The file lands in your project and you own the code.

    Accordion912 B

    Seções empilhadas em forma de árvore de prompt de terminal, com uma animação suave de altura.

    client

feedback

  • Skeleton234 B

    Reserve o espaço do conteúdo enquanto ele carrega.

    servidor · 0 js

  • saving…
    Spinner398 B

    Indique carregamento com um SVG animado por CSS, sem JavaScript.

    servidor · 0 js

  • [info]09:41:07deploy queuedbuild 482 waits behind 2 others
    [success]09:41:52deploy finishedlive on cd-ui.dev in 38s
    Alert776 B

    Uma linha de log estilo terminal para informação, sucesso, aviso ou erro.

    servidor · 0 js

  • x
    x
    Progress465 B

    Uma barra que mostra o quanto uma tarefa avançou, ou que ela ainda está em andamento.

    client

  • Toast1.3 kB

    Notificações empilhadas que somem sozinhas, com suporte a swipe e teclado.

    client

formulário

  • Input525 B

    Campo de texto com estados visuais de foco, erro e desativado.

    client

  • Use the eye to check what you typed.

    Password Input1.7 kB

    Campo de senha com botão de mostrar/ocultar.

    client

  • type or paste 6 digits

    OTP Input539 B

    Uma caixa por dígito, com avanço automático, backspace e colagem.

    client

  • the field grows on its own as you type.

    Textarea451 B

    Campo de texto longo que cresce com o conteúdo, sem JavaScript.

    client

  • only to reply to you, no spam.

    Field451 B

    Conecte label, campo, ajuda e erro com ids e atributos aria.

    client

  • only to reply to you, no spam.

    Form553 B

    Passe um schema do Zod e valide os campos sem adicionar outra biblioteca de formulário.

    client

  • Checkbox688 B

    Caixa de seleção com estados marcado, desmarcado e parcial.

    client

  • Radio Group522 B

    Escolha exatamente uma opção de um conjunto pequeno, com navegação pelas setas.

    client

  • Switch660 B

    Alterne uma opção com resposta imediata.

    client

  • MonthlyYearlySave 20%

    $24 / month

    Pricing Toggle885 B

    Alternador mensal/anual com selo opcional de economia.

    client

  • Slider667 B

    Escolha um número ou uma faixa arrastando o polegar ou usando as setas.

    client

  • Select1.2 kB

    Escolha uma opção numa lista que abre a partir do botão.

    client

sobreposição

  • Dialog898 B

    Janela modal com foco controlado e devolvido ao fechar.

    client

  • Popover478 B

    Um painel flutuante ancorado num botão que pode ter conteúdo interativo.

    client

  • Tooltip794 B

    Mostre uma dica curta ao passar o mouse ou navegar com teclado.

    client

navegação

  • 48 contributions this week.
    Tabs613 B

    Troque de conteúdo com abas e um indicador que acompanha a seleção.

    client