The minimal UI component playground
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.
[!NOTE] Astrobook supports various frameworks. We use React as an example here. Check the Astro docs for other integrations.
Install the packages
npm install astro @astrojs/react astrobook
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()],
})
Add scripts to your package.json
"scripts": {
"dev": "astro dev",
"build": "astro build"
}
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,
}
Run npm run dev
and open http://localhost:4321
to see your stories.
directory
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 */
],
})
subpath
You can run Astrobook as a standalone app. You can also add it to your existing Astro project. In the latter case, you can use the subpath
option to specify the subpath of Astrobook.
// astro.config.mjs
import { defineConfig } from 'astro/config'
import astrobook from 'astrobook'
export default defineConfig({
integrations: [astrobook({ subpath: '/docs/components' })],
})
In the example above, Astrobook will be available at http://localhost:4321/docs/components
.
Notice that the subpath
option is relative to the base URL of your Astro project. For example, if you configure both Astro's base
and astrobook
's subpath
, like so:
// astro.config.mjs
import { defineConfig } from 'astro/config'
import astrobook from 'astrobook'
export default defineConfig({
base: '/base',
integrations: [astrobook({ subpath: '/docs/components' })],
})
You Astro project will be available at http://localhost:4321/base
and Astrobook will be available at http://localhost:4321/base/docs/components
.
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 }, '*')
MIT