Repolode
Enviar
facebook

facebook/astryx

Um design system open source para React com mais de 150 componentes acessíveis, temas e CLI, desenvolvido com React 19 e StyleX.

Ver no GitHubSite
Estrelas
13,703
Forks
1,180
Issues abertas
526
Último commit
há 4 horas

O que é?

Astryx é um design system open source que surgiu dentro da Meta e agora está disponível para uso externo. Ele oferece componentes React tipados, temas no nível da marca, modo escuro e templates prontos para produção em um único sistema.

Você importa CSS pré-compilado e um provider de tema e, em seguida, usa os componentes diretamente, sem precisar de um plugin de build. Os estilos são escritos com StyleX, mas ficam ocultos para quem consome a biblioteca, que pode sobrescrever os componentes com className usando Tailwind, CSS modules ou CSS puro. Os temas são conjuntos de sobrescritas de propriedades customizadas de CSS, permitindo personalizá-los sem criar um fork do código-fonte dos componentes.

O projeto também inclui uma CLI para documentação de componentes, templates, scaffolding e codemods. A API e a documentação foram projetadas para que desenvolvedores e assistentes de IA possam usar a mesma referência. O projeto está atualmente em beta e requer React 19 ou posterior.

Recursos principais

  • 01Mais de 150 componentes React acessíveis, com suporte completo a TypeScript.
  • 02Sete temas prontos que podem ser personalizados por meio de propriedades customizadas de CSS.
  • 03Modo escuro e temas no nível da marca.
  • 04Os componentes podem ser sobrescritos com className usando Tailwind, CSS modules ou CSS puro.
  • 05Um comando swizzle extrai o código-fonte de um componente para o seu projeto.
  • 06Uma CLI para documentação de componentes, templates, scaffolding e codemods.

Casos de uso

  • Criar uma aplicação React que precise de uma biblioteca de componentes consistente e acessível.
  • Criar uma interface de produto com a identidade da marca, personalizando variáveis do tema em vez de criar um fork dos componentes.
  • Oferecer a assistentes de programação com IA uma API de componentes documentada para criar interfaces.

Início rápido

  1. 1

    Instale core, um tema, StyleX e a CLI com npm

    npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex && npm install -D @astryxdesign/cli
  2. 2

    Siga o guia de início rápido do pacote core para importar CSS e configurar o provedor do tema

  3. 3

    Colaboradores: habilitem o Corepack e instalem as dependências no repositório

    corepack enable pnpm install

Antes de usar

  • Atualmente está em beta, então as APIs podem mudar.
  • Os pacotes publicados @astryxdesign/vega e @astryxdesign/charts só têm versões @canary; ainda não há uma versão estável.
  • Requer React 19 ou posterior.

Tópicos

#react#design-system#ui-components#stylex#typescript#theming#accessibility

Perguntas frequentes

O que é astryx?
Um design system open source para React com mais de 150 componentes acessíveis, temas e CLI, desenvolvido com React 19 e StyleX. Astryx é um design system open source que surgiu dentro da Meta e agora está disponível para uso externo. Ele oferece componentes React tipados, temas no nível da marca, modo escuro e templates prontos para produção em um único sistema.
astryx é gratuito? Qual é a licença?
astryx é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
astryx ainda é mantido?
Manutenção ativa. O último commit de astryx foi em 19 de out. de 2026.
Para que posso usar astryx?
Criar uma aplicação React que precise de uma biblioteca de componentes consistente e acessível. Criar uma interface de produto com a identidade da marca, personalizando variáveis do tema em vez de criar um fork dos componentes. Oferecer a assistentes de programação com IA uma API de componentes documentada para criar interfaces.
Como instalar astryx?
Instale core, um tema, StyleX e a CLI com npm: npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex && npm install -D @astryxdesign/cli Siga o guia de início rápido do pacote core para importar CSS e configurar o provedor do tema Colaboradores: habilitem o Corepack e instalem as dependências no repositório: corepack enable pnpm install
Onde consigo astryx?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/facebook/astryx

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados