projetos / um projeto

Visão geral

O entrepta é um design system dark first. Superfícies quase pretas, mono na UI, serifa em itálico nos títulos.

Ele começou com cara de editor de código: abas com barra de título, uma status bar, um ◆ na frente de todo label e um // antes de todo erro. Na v4 eu tirei tudo isso. Era a cara do meu site, não algo que todo projeto devia receber por padrão. Agora a biblioteca não tem marca própria, e se você quiser o ◆ ou a moldura de editor de volta, é só passar.

Os componentes são copiados pro seu repositório como código-fonte, no modelo do shadcn. Sem SDK, sem runtime. O código é seu.

npx @entrepta/cli@latest init
npx @entrepta/cli@latest add button card command-palette

O que vem

62 componentes em 8 seções, em React 19, Tailwind v4 e variáveis CSS.

Sete temas prontos: entrepta, blossom, marmalade, julia, ivy, bosco e taylor, o mais novo, que não tem cor nenhuma: branco no escuro, preto no claro. Escolha um, ou instale os sete e troque em runtime. Toda cor de texto passa no WCAG AA em todo tema e modo, e um teste mede isso a cada mudança.

Feito pra agentes de código

O entrepta foi pensado pra ser instalado e usado pelo Claude Code, pelo Cursor ou pelo Codex tanto quanto por pessoas.

• Um AGENTS.md pro seu projeto. O botão AGENTS.md do site monta um: você escolhe o framework, o tema e os componentes, e ele diz como instalar, onde as coisas ficam, qual token vai onde e como cada componente é usado.
• Toda página da documentação em Markdown. Coloque .md em qualquer URL da documentação, como /docs/components/button.md.
• /llms.txt indexa todas as páginas, e /llms-full.txt é o site inteiro num arquivo só.

Instalação

npx @entrepta/cli@latest init --theme=ivy
 
# all seven themes, switchable at runtime
npx @entrepta/cli@latest init --theme=ivy --themes=all
 
npx @entrepta/cli@latest add button card field

O init escreve os tokens, o helper cn e o entrepta.json. O add copia cada componente com tudo o que ele importa e instala os pacotes npm dele. Funciona em Next.js (App ou Pages Router) e em Vite, e nunca sobrescreve um arquivo sem --overwrite.

Toda página de componente na documentação também tem uma aba Manual, com as dependências e o código-fonte, já com os imports reescritos.

Como usar

import { Button } from "@/components/entrepta/button"
import { Card, CardHeader, CardLabel, CardTitle } from "@/components/entrepta/card"
 
export function Launch() {
  return (
    <Card variant="featured">
      <CardHeader>
        <CardLabel>launch</CardLabel>
      </CardHeader>
      <CardTitle>
        Ship it <em>tonight.</em>
      </CardTitle>
      <Button>deploy</Button>
    </Card>
  )
}

Feito com entrepta

Esse site roda nele. O entrepta começou aqui, e a v2 foi construída aqui primeiro, antes de ir pro design system. O site ainda está na v3, então por enquanto ele tira a cara de editor com overrides próprios.

Stack

React 19, Next.js 15 como setup de referência, Tailwind v4, Radix UI, variáveis CSS, TypeScript strict, class-variance-authority, ícones Phosphor, e motion pros componentes que animam por JavaScript.

Licença

MIT.

Links

https://entrepta.vercel.app

https://github.com/imnotannamaria/entrepta