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.
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.
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.
| 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.
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.
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-startedpnpm 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 checkNever 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.
MIT. Astryx is © Meta Platforms, Inc. and affiliates; this project ports its design and reuses its documentation prose, and claims no affiliation or endorsement.