Astrobook NPM | npm.io

astrobook

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.

Try it Online

astrobook.pages.dev

Quick start

!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.

Options

`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.

`head`

The path to an Astro component that includes custom tags to the <head> of your Astrobook site. It should only include elements permitted inside <head>.

Below is an example of a custom head component that configures the global styles and fonts.

---
// src/components/CustomHead.astro

// Apply global styles from a CSS file
import './global.css'
---

<!-- Load custom fonts -->
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

<!-- Apply global styles -->
<style is:global>
  html {
    font-family: 'Inter', sans-serif;
  }
</style>

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

export default defineConfig({
  head: './src/components/CustomHead.astro',
})

`title`

You can set the title for your website.

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

export default defineConfig({
  title: 'My Awesome Playground',
})

Advanced

Toggle theme via message

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 }, '*')

Who's using Astrobook?

ProseKit

Add your project

License

MIT

ui component playground storybook react vue preact svelte solid lit astro vite

@astrobook/core @astrobook/types @astrobook/ui

6 months ago

6 months ago

8 months ago

8 months ago

9 months ago

9 months ago

10 months ago

11 months ago

10 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago