← vbss.io

VBSS UI

Componentes React em pacotes npm separados: instale só o que vai usar.

Biblioteca moderna e personalizável de componentes para criar aplicações web atraentes e responsivas.

Modern and customizable component library for creating attractive and responsive web applications.

React · TypeScript · Tailwind | Ao vivo

Acessar VBSS UI

Código no GitHub

Sobre

Instalar uma biblioteca inteira para usar três componentes pesa no bundle. Na vbss-ui cada componente é um pacote npm próprio, com versão independente.

É a base visual do Imaginaria e do RetroTrack, e a documentação é feita com a própria biblioteca.

Telas

Data Table com ordenação e paginação, na documentação em modo escuro.
Data Table com ordenação e paginação, na documentação em modo escuro.
Date Picker com locale e o código do exemplo.
Date Picker com locale e o código do exemplo.
Tema por 5 variáveis CSS em HSL.
Tema por 5 variáveis CSS em HSL.
Página do Button, com instalação só do pacote dele.
Página do Button, com instalação só do pacote dele.

Pontos fortes

Um pacote por componente

@vbss-ui/button, @vbss-ui/data-table e assim por diante. O produto instala só o que usa, com tree-shaking.

Tema sem provider

5 variáveis CSS em HSL mudam a cor de tudo. Não precisa de ThemeProvider nem de importar CSS.

Acessibilidade herdada

Checkbox, dialog, dropdown, popover, radio, switch e tooltip usam Radix por baixo.

Docs com playground

A documentação usa a própria biblioteca, com exemplo ao vivo, modo escuro e SEO por página.

Funcionalidades

  • 18 componentes, de Button a Data Table e Date Picker
  • Prop polimórfica as tipada e variantes com class-variance-authority
  • CSS injetado pelo JS, sem import de estilo
  • Data Table com ordenação por teclado e paginação
  • Date Picker controlado ou livre, com locale
  • Tipos TypeScript em todos os pacotes

Como foi feito

Arquitetura

Monorepo com Lerna: um pacote por componente, uma lib interna de utilitários e o site de docs. Tailwind, Radix e class-variance-authority por baixo.

Granularidade tem custo

Um pacote por componente deixa o produto leve. O custo é ter 19 pacotes para publicar.

CSS dentro do JS

O estilo vai embutido no pacote, para quem usa não precisar importar CSS nem configurar o Tailwind.

Código

npm install @vbss-ui/button

import { Button } from "@vbss-ui/button";

export const Save = () => (
  <Button variant="primary" rounded="full">
    Salvar
  </Button>
);

Instala só o Button e usa direto, sem provider e sem CSS.