Design System
ComponentesÍconesPlayground
Primeiros passosVisão geralAçõesButtonToggleFormuláriosInputTextareaCheckboxSwitchRadio GroupSelectComboboxNumeric InputPattern InputDate PickerTime PickerFile UploadSliderRange SliderOTP InputRatingExibição de dadosTextIconBadgeAvatarCardTablePaginationEmpty StateSkeletonFeedbackAlertToastDialogAlert DialogSheetProgressSpinnerSobreposiçõesTooltipPopoverDropdown MenuContext MenuHover CardCommandNavegaçãoLinkBreadcrumbMenubarNavigation MenuLayoutStackGridSeparatorTabsAccordionCollapsibleStepperAspect RatioScroll Area
v1.4.053 componentes prontosComponentes que funcionam em qualquer lugar.Web Components acessíveis e com tema, construídos com Lit e Tailwind CSS v4. Isolados de verdade: o CSS do seu app não quebra nada, e você não configura nada.ComeçarGitHub
TerminalCopiar
$ npm install @phsa.tec/design-system-react
Criar conta
Em diaSprint 1472%DesignFront-endAPIConvidar pessoa
Feito para não dar trabalhoBibliotecas em cima de frameworks de CSS costumam vazar para os dois lados. Esta faz o contrário.100% isoladoShadow DOM: o CSS da sua página não quebra os componentes, e o deles não vaza para a sua página.Zero configuraçãoSem tailwind.config, sem CSS global, sem plugin de build. Instale, importe e use.Só o que você usaUm entry point por componente e um arquivo por ícone. Importar o botão não traz o calendário.Tema por tokensCores, raio e fonte em variáveis CSS que atravessam o Shadow DOM. Modo escuro com uma classe.Formulários nativosFormData, required, reset e validação do navegador funcionam como nos inputs nativos.Qualquer frameworkCustom elements puros, com wrappers React tipados. Testado com React 19 e Next.js 16 com SSR.
Escreva assim. Veja assim.Componentes React tipados, com props e eventos como você espera.
newsletter.tsxCopiar
import { Button, Input, Stack } from "@phsa.tec/design-system-react/react";

export function Newsletter() {
  return (
    <Stack gap="sm">
      <Input type="email" label="E-mail" placeholder="voce@exemplo.com" />
      <Button block>Assinar</Button>
    </Stack>
  );
}
Assinar
Explore os 53 componentesExemplos ao vivo, código para copiar e a API completa de cada um.Abrir a documentação