refy

Criar com componentes, templates e Playground: escolha uma composição, personalize o tema e exporte para seu projeto. O site refy.design mostra os mesmos componentes rodando.

Guia das 122 famílias: quando usar, alternativas e teclado implementado, com API e exemplos do pacote.

A mesma interface, com a identidade do seu produto. Refy é uma biblioteca React/TypeScript criada por Vinícius Coimbra, sob licença MIT.

O Refy nasceu da dificuldade de personalizar outros design systems: muito código, instalações complexas e tempo demais para chegar ao visual desejado. As duas premissas são personalização simples desde o início e baixo custo de código e compilação. São critérios de produto, não uma promessa de que qualquer tela ou alteração visual dispensa desenvolvimento.

O Playground permite escolher um tema, mudar cores, fontes, formas, espaçamentos e movimento, e exportar essa configuração. A aplicação usa os mesmos componentes, sem copiar sua implementação. Páginas continuam sendo composições de átomos, moléculas e organismos.

Estender o Refy

Documentação avançada: como decidir entre tema, Block, adapter e novo organismo, com de-para e critérios para humanos e agentes. Playbook do Coverflow: composição, estado, gesto, tokens e testes ligados à implementação real.

Experimentar e criar seu tema

Requisitos locais: Node 22.12+ e npm. Consumo verificado com React/React DOM 18.3.1 e 19.2.4; isso não garante toda versão futura aceita pelo manifesto.

git clone https://github.com/viniciuscoimbra/refy-design.git
cd refy-design
npm ci
npm run storybook

Abra http://localhost:6006 e vá a Playground → Componentes.

1. Escolha Tema e Modo na barra do Storybook. Tema reúne toda a identidade; modo é Claro, Escuro ou Sistema.
2. Em Personalizar tema, ajuste cores, tipografia, forma, espaçamento, tokens e movimento. Confira o resultado nos exemplos e nas páginas, incluindo menus, modais e drawers.
3. Em Exportar, baixe o JSON de Tema aplicado. Importe esse objeto no ThemeProvider do seu projeto.

Refy, Fluido, Terracota e Cobalto são pontos de partida. A configuração personalizada fica neste navegador; exporte o JSON para compartilhá-la ou versioná-la. Uma fonte própria precisa ser carregada pela aplicação, além de indicada no tema. Guia completo de temas.

Roteiro completo de adoção e testes end-to-end.

Core e coleções

Além de átomos, moléculas e organismos, o catálogo oferece coleções por capacidade: mídia, geolocalização, conversação, dados, colaboração, comércio, financeiro e conteúdo. Os imports continuam os mesmos; nenhuma dependência de serviço é adicionada pela classificação

... View full README on GitHub