Astrobook is a UI component playground that supports multiple frameworks including React, Vue, Preact, Svelte, Solid, Lit, and Astro. It offers a unified environment to develop, test, and showcase components.

astrobook.pages.dev

1. Install the packages

   npm install astro @astrojs/react astrobook

2. Create astro.config.mjs and add the astrobook integration

   // astro.config.mjs
   import { defineConfig } from 'astro/config'
   import react from '@astrojs/react'
   import astrobook from 'astrobook'
   
   // https://astro.build/config
   export default defineConfig({
     integrations: [react(), astrobook()],
   })

3. Add scripts to your package.json

   "scripts": {
     "dev": "astro dev",
     "build": "astro build"
   }

4. Write stories. Astrobook scans all .stories.{ts,tsx,js,jsx,mts,mtsx,mjs,mjsx} files. It's compatible with Storybook's Component Story Format v3.

   // src/components/Button.stories.ts
   import { Button, type ButtonProps } from './Button.tsx'
   
   export default {
     component: Button,
   }
   
   export const PrimaryButton = {
     args: {
       variant: 'primary',
     } satisfies ButtonProps,
   }
   
   export const SecondaryButton = {
     args: {
       variant: 'secondary',
     } satisfies ButtonProps,
   }

5. Run npm run dev and open https://localhost:4321 to see your stories.

You can use the directory option to specify the directory to scan for stories. The default directory is current working directory.

// astro.config.mjs
import { defineConfig } from 'astro/config'
import astrobook from 'astrobook'

export default defineConfig({
  integrations: [
    astrobook({
      directory: 'src/components',
    }),
    /* ...other integrations */
  ],
})

If you're running Astrobook in an iframe, you can toggle the theme via a message.

const theme = 'light' // or "dark"
iframe.contentWindow.postMessage({ type: 'astrobook:set-theme', theme }, '*')

• ProseKit

Add your project

MIT