Astryx
Meta
메타가 공개한 오픈소스 디자인 시스템이에요. 150개 이상의 접근성 컴포넌트, 테마, 다크 모드, 템플릿, CLI를 사람과 AI 어시스턴트가 같은 기준으로 쓰도록 설계했어요.
Astryx 활용 1
인덱스
- 만든 곳
- Meta
- 분류
- 기타
- 쓰는 곳
- React 19 이상, 웹, CLI (npm)
- 요금
- 무료(MIT)
- MCP
- MCP 지원 여부 미확인
기능
- 150개 이상의 접근성 컴포넌트
- CSS 사용자 지정 속성 덮어쓰기로 브랜드 테마 적용
- 다크 모드와 바로 쓸 수 있는 템플릿
- 테마 7종(neutral, butter, chocolate, matcha, stone, gothic, y2k)
- swizzle로 컴포넌트 소스를 프로젝트로 꺼내 직접 수정
- className으로 Tailwind, CSS 모듈, 일반 CSS 덮어쓰기
- CLI로 컴포넌트 문서, 템플릿, 스캐폴딩, 테마, 코드모드 제공
시작하는 법
- npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
- npm install -D @astryxdesign/cli
- CSS 임포트와 테마 프로바이더를 추가 (빌드 플러그인 불필요, 자세한 설정은 packages/core README의 Quick Start)
- package.json에 astryx 스크립트를 넣고 npm run astryx -- component --list 로 컴포넌트 목록 확인
알아 둘 한계
- 현재 베타
- React 19 이상 필요
- @astryxdesign/vega와 @astryxdesign/charts는 @canary 태그로만 배포, 정식 릴리스 없음
- @astryxdesign/lab(실험 컴포넌트)은 npm에 배포하지 않음