facebook/astryx

어떤 프로젝트인가요?

핵심 기능

• 01TypeScript를 완벽하게 지원하는 접근성 높은 React 컴포넌트 150개 이상.
• 02CSS 커스텀 프로퍼티로 사용자 지정할 수 있는 기본 제공 테마 7종.
• 03다크 모드와 브랜드 단위 테마 설정.
• 04Tailwind, CSS modules 또는 일반 CSS를 사용해 className으로 컴포넌트를 재정의할 수 있습니다.
• 05swizzle 명령으로 컴포넌트 소스를 프로젝트에 가져올 수 있습니다.
• 06컴포넌트 문서, 템플릿, 스캐폴딩, codemod를 위한 CLI.

활용 사례

• 일관되고 접근성 높은 컴포넌트 라이브러리가 필요한 React 애플리케이션 구축.
• 컴포넌트를 포크하는 대신 테마 변수를 사용자 지정해 브랜드에 맞는 제품 UI 제작.
• AI 코딩 어시스턴트가 인터페이스를 만들 때 참고할 문서화된 컴포넌트 API 제공.

빠른 시작

1. 1

   npm으로 core, 테마, StyleX, CLI를 설치하세요

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

   CSS 가져오기와 테마 프로바이더 설정은 core 패키지의 빠른 시작 가이드를 따르세요

3. 3

   기여자: Corepack을 활성화하고 저장소에서 종속성을 설치하세요

   corepack enable pnpm install

사용 전 알아둘 점

• !현재 베타 버전이므로 API가 변경될 수 있습니다.
• !공개 패키지 @astryxdesign/vega와 @astryxdesign/charts는 아직 안정 버전 없이 @canary 릴리스만 제공됩니다.
• !React 19 이상이 필요합니다.

토픽

자주 묻는 질문

astryx은(는) 무엇인가요?

React 19과 StyleX 기반의 오픈 소스 React 디자인 시스템으로, 접근성 높은 컴포넌트 150개 이상과 테마, CLI를 제공합니다. Astryx는 Meta 내부에서 시작해 현재 외부에도 공개된 오픈 소스 디자인 시스템입니다. 타입이 지정된 React 컴포넌트, 브랜드 단위 테마 설정, 다크 모드, 바로 배포할 수 있는 템플릿을 하나의 시스템으로 제공합니다.

astryx은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

astryx은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

astryx은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. astryx의 마지막 커밋은 2026년 10월 19일입니다.

astryx은(는) 어디에 사용할 수 있나요?

일관되고 접근성 높은 컴포넌트 라이브러리가 필요한 React 애플리케이션 구축. 컴포넌트를 포크하는 대신 테마 변수를 사용자 지정해 브랜드에 맞는 제품 UI 제작. AI 코딩 어시스턴트가 인터페이스를 만들 때 참고할 문서화된 컴포넌트 API 제공.

astryx는 어떻게 설치하나요?

npm으로 core, 테마, StyleX, CLI를 설치하세요: npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex && npm install -D @astryxdesign/cli CSS 가져오기와 테마 프로바이더 설정은 core 패키지의 빠른 시작 가이드를 따르세요 기여자: Corepack을 활성화하고 저장소에서 종속성을 설치하세요: corepack enable pnpm install

astryx은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/facebook/astryx