Tipografia
Escala com contraste real entre títulos e corpo, ritmo de leitura confortável.
Kikito · Design SystemO kit visual para
O kit visual para
construir rápido.
Componentes prontos para copiar, tutoriais em vídeo, dicas e novidades. Testados em produção, com tokens, tema claro/escuro e acessibilidade desde o primeiro pixel.
Construído com
Next.jsReactTypeScriptTailwindFigmashadcn/ui
Montei a landing inteira num fim de semana. Os componentes já vêm com tema claro/escuro e acessibilidade.
Os tutoriais em vídeo são diretos ao ponto. Em uma tarde eu já tinha o design system rodando no projeto.
Copia, cola, funciona. E o melhor: dá pra customizar tudo pelos tokens sem brigar com o CSS.
A tabela periódica de componentes é viciante. Achei coisa que eu nem sabia que precisava.
Documentação honesta, com estados de erro e loading de verdade. Economizou semanas do meu time.
Montei a landing inteira num fim de semana. Os componentes já vêm com tema claro/escuro e acessibilidade.
Os tutoriais em vídeo são diretos ao ponto. Em uma tarde eu já tinha o design system rodando no projeto.
Copia, cola, funciona. E o melhor: dá pra customizar tudo pelos tokens sem brigar com o CSS.
A tabela periódica de componentes é viciante. Achei coisa que eu nem sabia que precisava.
Documentação honesta, com estados de erro e loading de verdade. Economizou semanas do meu time.
O tema dourado/patina deu uma cara premium pro nosso painel sem a gente contratar designer.
Dicas e novidades toda semana. Virou minha fonte pra acompanhar o ecossistema React.
Migrei do zero pro Kikito CN e os bugs de acessibilidade simplesmente sumiram.
Performance impecável. Nada de JS pesado escondido nos componentes.
O portfólio do Kikito é referência. Mando pros juniores estudarem padrão de qualidade.
O tema dourado/patina deu uma cara premium pro nosso painel sem a gente contratar designer.
Dicas e novidades toda semana. Virou minha fonte pra acompanhar o ecossistema React.
Migrei do zero pro Kikito CN e os bugs de acessibilidade simplesmente sumiram.
Performance impecável. Nada de JS pesado escondido nos componentes.
O portfólio do Kikito é referência. Mando pros juniores estudarem padrão de qualidade.
Os 7 pilares por trás de cada componente.
Nada de slop. Cada peça do Kikito respeita os mesmos fundamentos de design, do espaçamento ao texto, para tudo parecer feito pela mesma mão.
$npx kikito detect ./src
Cor & Contraste
Paleta tingida, dourado técnico como acento e contraste dentro do WCAG.
Espaçamento
Ritmo vertical consistente, respiro intencional em vez de padding aleatório.
Responsivo
Breakpoints guiados pelo conteúdo, não por dispositivos genéricos.
Interação
Estados honestos: hover, foco, loading e erro de verdade em cada peça.
Movimento
Easing físico, sem bounce. Animação que orienta, não que distrai.
UX Writing
Texto específico em vez de genérico. Cada palavra ganha seu lugar.
197 componentes, dois jeitos de navegar.
Folheie como uma revista ou explore a tabela periódica. Clique em qualquer um para ver o preview e copiar o código.
Tokens
Colors
Paleta de design tokens: brand intents, semantics, surfaces, texto e escala.
CO
Tudo para construir, num lugar só.
Componentes prontos, tutoriais, dicas e novidades. Cada peça testada em produção, com tema, tokens e acessibilidade desde o começo.
Componentes prontos para baixar
Mais de 190 componentes copy-paste, do Button ao Kanban. Você instala só o que usa.
Tokens e tema
Um arquivo de tokens controla cor, raio e tipografia. Claro e escuro de graça.
Tutoriais em vídeo
Projetos do zero ao deploy, explicados passo a passo.
Catálogo navegável
Tabela periódica e revista de componentes, com busca por ⌘K e preview ao vivo.
Dicas & novidades
Curadoria semanal do ecossistema front-end, sem ruído.
Código aberto
Tudo versionado e auditável. Sem caixa-preta, sem dependências escondidas.
Preview ao vivo
Veja cada componente em ação antes de copiar, em tema claro ou escuro.
Portfólio em evolução
Projetos reais que mostram o design system aplicado de ponta a ponta.
Instalação
Comece em segundos.
Use o CLI oficial kikitocn para configurar o projeto e instalar qualquer componente em segundos.
Ainda não tem um projeto?
$npx create-next-app@latest meu-projeto --typescript --tailwind --appConfigurar no projeto
$npx kikitocn initInstalar um componente
$npx kikitocn add buttonVer todos os componentes
$npx kikitocn listMétodos alternativos
Instalar múltiplos
$npx kikitocn add button modal inputVerificar configuração
$npx kikitocn doctorClonar o repositório
$git clone https://github.com/devjuanmarcos/kikito-tv-oficial