Sci-fi themed React component library and docs site, ported from the original Vite + React SPA to Astro (static output, React islands for interactive parts).
npm install
npm run devnpm run build
npm run previewsrc/components/ui/— the component library itself (Button, Dialog, Menu, Combobox, Toast, Tabs, Accordion, Alert, Checkbox, RadioGroup, Switch, Input, Textarea, Chart, Frame). Mostly thin wrappers around@zag-js/*state machines plus the customFrameSVG decoration system.src/components/docs/— shared doc-page building blocks (Wrapper,Title,Previewtabs,PreviewCode,InstallPackage, TOCMenu).src/components/pages/— one file per route's actual content (near-1:1 port of the old page's content), mounted as a React island.src/components/SiteChrome.tsx— header nav + mobile sidebar drawer, global across every page viaBaseLayout.astro.src/layouts/BaseLayout.astro/DocsLayout.astro— page shells.src/pages/— thin Astro route files, one per/docs/<name>page plusindex.astro(home).
- Add the component to
src/components/ui/<name>.tsx(@zag-js/*+Frame+cva/twMerge, matching the existing components' style). - Add its doc content to
src/components/pages/<name>.tsx(copy an existing one as a template —Preview/Installation/Usagesections). - Add the route:
src/pages/docs/<name>.astro, rendering<DocsLayout><YourPage client:load /></DocsLayout>. - Add a nav link in
src/components/SiteChrome.tsx'sdocLinks.