About
A Svelte 5 port of Astryx, Meta's open source design system, which shipped for React only. All 101 components, 8 themes, 184 design tokens, 43 page templates and a CLI for humans and AI agents. The port is checked rather than claimed: three scripts diff our compiled output against the already-compiled CSS inside Meta's published packages on every build, currently at zero mismatches across 1,528 style keys, 1,463 style classes and 2,418 theme declarations.
Documentation
An unofficial, community port. Not affiliated with, endorsed by, or supported by Meta.
Every component is authored against the same design-token references Astryx uses, so the StyleX compiler emits byte-identical atomic CSS — and three oracles diff that output against the already published @astryxdesign/* packages on every build. It is a port you can check rather than one you have to trust.
Installation
npm install @astryx-svelte/core @astryx-svelte/theme-neutral
@stylexjs/stylex is a peer dependency and npm and pnpm install it for you. It is required at runtime — the components reach stylex.props() through sx() — so add it explicitly if your package manager does not resolve peers automatically.
import { Button } from '@astryx-svelte/core';
import '@astryx-svelte/core/base.css';
import '@astryx-svelte/core/astryx.css';
import '@astryx-svelte/theme-neutral/theme.css';
That is the whole setup — the stylesheet ships pre-built, so nothing has to run a compiler. To compile and tree-shake from source instead, core's README has the one-line Vite preset.
Requires Svelte 5. Runes are used throughout; there is no Svelte 4 compatibility mode.
Why this port is different
Most ports ask you to trust them. This one is checked, because a design system is the rare thing where "is this the same?" has a mechanical answer.
| Oracle | What it diffs |
|---|---|
| Component classes | Our compiled atomic classes against upstream's published dist/ |
| Stylesheet | Our built astryx.css against upstream's, rule for rule |
| Theme tokens | Every declaration in all eight theme packages |
A missing declaration, a wrong value and an invented one all fail the build. The live counts — components, oracle keys, ported test cases, known debts — are generated into port/status.md rather than written here, because a number typed into prose goes stale quietly and this one used to.
The limits are known rather than hoped for, too. The class oracle cannot see inside a stylex.create function style, which is why the stylesheet oracle exists — and it found a real RTL bug the day it landed. port/debts.md records every deliberate divergence with the condition that retires it.
Packages
| Package | What it is |
|---|---|
@astryx-svelte/core | The components, the theme system, the composables, the message catalogs |
@astryx-svelte/cli | Docs, search, templates, theme tooling and codemods, for humans and agents |
@astryx-svelte/theme-* | Eight theme packages, neutral being the default Astryx look |
docs | The documentation site, built from the same docs the CLI serves |
Ten packages ship together, versioned by the Astryx release they port rather than by this port's own history — so 0.4.5 means "at parity with Astryx 0.4.5, plus changes upstream has no counterpart for". CHANGELOG.md explains what a version collision does to that scheme. docs is the eleventh workspace package and is not published.
The parity rule
If it's not in Astryx, it's not here. Invented props, extra variants, nicer defaults and hand-drawn demo content are defects, not improvements. Upstream's prose is reused; upstream's React code is not, because none of it is true of a Svelte library. Where a fact genuinely differs — one stylesheet instead of two, no per-component subpath exports — the port says the true thing rather than the familiar one.
It cuts the other way too. Upstream bugs are written down, not replicated: their published stylesheet ships ten classes from an ESLint test fixture, color:#FF0000 among them, because their build's ignore glob misses the file. Ours does not, and the exemption retires itself when they fix it.
Documentation
astryx-svelte.rohitk06.in — every component page, reference topic and example is generated from the same .doc.mjs modules the CLI reads, so the site cannot drift from what the CLI prints. Every example is a real file in this repository, rendering live Svelte rather than a screenshot.
Read the same content in your terminal:
npx @astryx-svelte/cli component Button
npx @astryx-svelte/cli docs getting-started
Contributing
pnpm install
pnpm -r build # must run before check — the docs generator reads core's built dist/
pnpm dev # the docs site, the port's only demo surface
pnpm verify # the gate: build, check, lint, test, and the status drift check
Never install with --prod or prune devDependencies: all three fidelity oracles and the docs content pipeline read the published @astryxdesign/* packages, which are devDependencies.
CLAUDE.md is the contributor guide, port/todo.md the live goal and backlog, and port/ledger/ the per-batch implementation notes — including what broke and why, which is usually the more useful half.
License
MIT. Astryx is © Meta Platforms, Inc. and affiliates; this project ports its design and reuses its documentation prose, and claims no affiliation or endorsement.