@poly-ds/react

Componentes da design system poly-ds para React — gerados a partir de uma fonte única em Mitosis (@poly-ds/source), mais alguns adapters escritos à mão onde o gerador não alcança (runtime de tema, posicionamento flutuante, ControlValueAccessor-equivalentes).

Requer react >=18 e o CSS de @poly-ds/styles.

Instalação

npm install @poly-ds/react @poly-ds/styles @poly-ds/theme-manager @poly-ds/tokens

Uso mínimo

import { Button, DsThemeProvider } from '@poly-ds/react';
import '@poly-ds/styles';
import { createThemeManager } from '@poly-ds/theme-manager';
import { THEMES } from '@poly-ds/tokens';
import { createRoot } from 'react-dom/client';

const themeManager = createThemeManager({ themes: THEMES, defaultTheme: 'default' });

createRoot(document.getElementById('root')!).render(
  <DsThemeProvider manager={themeManager}>
    <Button variant="primary">Salvar</Button>
  </DsThemeProvider>,
);

DsThemeProvider é opcional — só necessário para o hook useTheme(). Sem ele, os componentes funcionam normalmente lendo os atributos data-ds-* já presentes no documento.

Componentes

19 componentes: Button, Input, Select, Checkbox, RadioGroup, Switch, Textarea, Label, FormField, Badge, Card, Skeleton, Avatar, Tooltip, Popover, Dialog, Tabs, Accordion e Table (+ TableRow/TableCell/TableHeaderCell). API completa, com as diferenças de idioma entre React/Vue/Angular, em docs/COMPONENTES.md; guia de instalação e primeiro uso em docs/COMECANDO.md.