Svelte 5 dual-personality component library — Apple HIG × Material Design 3 in one API.
Switch the entire visual grammar with a single data-theme attribute. Same component, two rigorously different design languages.
@persona-ui/lib— Component library (publishable)@persona-ui/docs— Documentation site (this monorepo's demo)
pnpm add @persona-ui/lib<script>
import '@persona-ui/lib/styles.css';
import { Button } from '@persona-ui/lib';
</script>
<html data-theme="apple" data-mode="light">
<Button variant="filled">Hello</Button>
</html>pnpm install
pnpm dev # Start docs site on http://localhost:5173
pnpm build # Build lib + docs
pnpm check # svelte-check in all packages
pnpm test:unit # 138 unit tests
pnpm test:a11y # a11y playwright specs
pnpm test:visual # visual regression specs
pnpm test:css # css contract specs
pnpm test # check + unitUses changesets:
pnpm changeset # add a changeset entry
pnpm changeset:version # bump versions + write CHANGELOG
pnpm release # version + build lib + publishpersona-ui/
├── packages/
│ └── lib/ # @persona-ui/lib — self-contained, no SvelteKit dep
│ ├── src/lib/ # components, internal helpers, styles
│ ├── tests/unit/ # vitest (138 tests, 44 files)
│ └── dist/ # build output (svelte-package)
├── apps/
│ └── docs/ # @persona-ui/docs — SvelteKit demo
│ ├── src/routes/ # /docs/* markdown-rendered pages
│ ├── src/lib/ # docs-only helpers (markdown registry)
│ ├── static/fonts/ # 5 woff2 self-hosted
│ └── tests/ # playwright a11y/css/visual specs
└── .changeset/ # version bumps & changelog entries
The library resolves through pnpm workspace — apps/docs imports @persona-ui/lib directly from packages/lib/src/lib (no build step needed during development).
MIT