Oito blocos shadcn/ui feitos com os componentes padrão, cada um com preview ao vivo e código para copiar: card de login, métricas, seletor de preços, configurações, abas, confirmação de exclusão, estado vazio e lista de equipe.
O shadcn/ui é um conjunto de componentes React que você copia para o seu projeto com a CLI dele, em vez de instalar como dependência. Eles são construídos sobre primitivos do Radix e estilizados com Tailwind. O valor está em combiná-los: abaixo estão oito blocos do dia a dia, como um card de login, um seletor de preços e uma confirmação de exclusão, cada um ao vivo e com código.
O que você recebe
Os previews rodam nesta página usando as nossas próprias cópias dos mesmos componentes, com as nossas cores, então botões e cantos ficam um pouco diferentes do tema padrão. O código é shadcn/ui puro e funciona depois do comando add mostrado primeiro.
Sim. O shadcn/ui é open source sob a licença MIT, então você pode usar e modificar os componentes em projetos comerciais.
Não no sentido usual. Não existe um pacote de componentes para atualizar; a CLI copia o código-fonte para o seu projeto e a partir daí ele é seu. Isso facilita as mudanças, mas significa que as atualizações são manuais.
Sim. Funciona em qualquer configuração React com Tailwind, incluindo Vite, React Router e Astro com React. A CLI pergunta qual framework você usa durante o init.
O site oficial tem um conjunto de blocks, e muitos templates da comunidade montam páginas completas a partir deles. Para começar rápido, combine seções como as daqui em uma página, ou use um criador de sites para o site de marketing e deixe o shadcn/ui para o app.
O shadcn/ui não é um pacote que você importa do npm. A CLI copia o código-fonte de cada componente para o seu projeto, então ele é seu e você pode editá-lo.
Quais componentes cada bloco usa
Card, Label, Input e Button. Cada campo tem um rótulo visível ligado a ele com htmlFor; o link secundário fica ao lado do rótulo a que se refere.
Três cards em um grid responsivo. O tabular-nums evita que os números pulem quando mudam.
Um Switch alterna entre preços mensais e anuais. O rótulo é clicável e a mudança de preço é anunciada porque fica em uma região aria-live.
Cada linha combina um Label e uma descrição com um Switch. Usar Label htmlFor torna todo o texto clicável, não só o pequeno botão.
As Tabs do shadcn são construídas sobre o Radix, então as setas, Home e End já funcionam e os papéis ARIA vêm configurados.
O Dialog cuida de prender o foco, do Escape e de devolver o foco ao trigger. Faça o botão destrutivo dizer exatamente o que vai acontecer.
Um estado vazio amigável diz o que vai aparecer ali e oferece a única ação que o preenche.
O Avatar mostra a foto e recorre às iniciais quando ela não existe ou ainda está carregando. A imagem precisa de um texto alt com o nome da pessoa.
Vai criar um formulário ou uma tabela de dados? Veja
Enviar e-mail aos clientes um dia antes.
Pedir uma avaliação após cada visita.
Proprietária
Cabeleireiro
Entrar
Use o e-mail com que você fez o agendamento.
Senha
Esqueceu?
Pagar anualmente
Studio
Escolher Studio
Notificações
Perfil
Cobrança
Seu nome, foto e bio.
Seu plano e suas faturas.
Excluir página
Excluir "Sobre nós"?
Isto remove a página e o link dela no menu. Não é possível desfazer.
Manter página
Excluída (apenas demonstração, nada foi removido).
Nenhum agendamento ainda
Compartilhe o seu link de agendamento e os novos agendamentos vão aparecer aqui.
Copiar link de agendamento
Adicionar um manualmente
Comece grátis · Sem cartão de crédito