### Install Astrobook Packages

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Install the necessary packages for Astrobook integration with Astro and React. This command assumes you are using npm.

```bash
npm install astro @astrojs/react astrobook
```

--------------------------------

### Configure Custom CSS Files

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Example of using the 'css' option to include custom CSS files in the Astrobook site. This allows for site-wide style customization.

```js
import { defineConfig } from 'astro/config'
import astrobook from 'astrobook'

export default defineConfig({
  integrations: [
    astrobook({
      css: [
        // Relative path to your custom CSS file
        './src/styles/custom.css',
      ],
    }),
  ],
})
```

--------------------------------

### Configure Story Directory

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Example of configuring the 'directory' option in astrobook to specify a custom directory for scanning stories. Defaults to the current working directory.

```js
import { defineConfig } from 'astro/config'
import astrobook from 'astrobook'

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

--------------------------------

### Single Story Hoisting Example

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Demonstrates how to configure a story to be automatically hoisted in the UI when its name matches the module name and it's the only story exported. This avoids redundant nesting in the sidebar.

```ts
// Button.stories.ts

import { Button as ButtonComponent } from './Button.tsx'

export default {
  component: ButtonComponent,
}

// Single named export.
// Export name matches module name (Button.stories.ts)
export const Button = {}
```

--------------------------------

### Story File Format (CSF3) Example

Source: https://context7.com/ocavue/astrobook/llms.txt

Story files must have a default export with a `component` property and named exports for individual stories. Named exports can include `args` and `decorators`.

```typescript
// src/components/Button.stories.ts
import { Button, type ButtonProps } from './Button.tsx'

// Default export: declares which component this file documents
export default {
  component: Button,
}

// Named export: a story with specific args
export const PrimaryButton = {
  args: { variant: 'primary', label: 'Click me' } satisfies ButtonProps,
}

export const SecondaryButton = {
  args: { variant: 'secondary', label: 'Cancel' } satisfies ButtonProps,
}

export const DisabledButton = {
  args: { variant: 'primary', label: 'Disabled', disabled: true } satisfies ButtonProps,
}
```

--------------------------------

### Vue Story Example with Different Steps

Source: https://context7.com/ocavue/astrobook/llms.txt

Define stories for a Vue component, including a default state and a state with a custom step value. Ensure the component is imported.

```typescript
// src/components/vue/VueCounter.stories.ts
import VueCounter from './VueCounter.vue'

export default { component: VueCounter }

export const Default = { args: {} }
export const LargeStep = { args: { step: 5 } }
```

--------------------------------

### React Story Example with Different Steps

Source: https://context7.com/ocavue/astrobook/llms.txt

Define stories for a React component, including a default state and a state with a custom step value. Ensure the component and its props type are imported.

```typescript
// src/components/react/ReactCounter.stories.ts
import { ReactCounter, type ReactCounterProps } from './ReactCounter'

export default { component: ReactCounter }

export const Default = {
  args: {} satisfies ReactCounterProps,
}

export const LargeStep = {
  args: { step: 5 } satisfies ReactCounterProps,
}
```

--------------------------------

### Configure Astrobook Subpath

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Example of configuring the 'subpath' option to specify the URL subpath for Astrobook within an existing Astro project. This allows Astrobook to be accessed at a custom route.

```js
import { defineConfig } from 'astro/config'
import astrobook from 'astrobook'

export default defineConfig({
  integrations: [
    astrobook({
      subpath: '/playground',
    }),
  ],
})
```

--------------------------------

### Story with Multiple Decorators

Source: https://github.com/ocavue/astrobook/blob/master/README.md

Example of how to apply multiple decorators to a story in Astrobook. The order of decorators in the array determines the nesting order of the applied styles.

```tsx
// Button.stories.tsx
import RedBorderDecorator from './AstroRedBorderDecorator.astro'
import { Button, type ButtonProps } from './Button.tsx'
import { GreenBorderDecorator } from './ReactGreenBorderDecorator.tsx'

export default {
  component: Button,
}

export const PrimaryButton = {
  args: { variant: 'primary' } satisfies ButtonProps,
  decorators: [
    { component: GreenBorderDecorator, props: { width: 10 } },
    { component: RedBorderDecorator },
  ],
}
```

--------------------------------

### Story with Multiple Decorators

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Example of applying multiple decorators (Astro and React) to a component within a story. The order of decorators in the list determines the nesting order of the applied styles.

```tsx
import RedBorderDecorator from './AstroRedBorderDecorator.astro'
import { Button, type ButtonProps } from './Button.tsx'
import { GreenBorderDecorator } from './ReactGreenBorderDecorator.tsx'

export default {
  component: Button,
}

export const PrimaryButton = {
  args: { variant: 'primary' } satisfies ButtonProps,
  decorators: [
    { component: GreenBorderDecorator, props: { width: 10 } },
    { component: RedBorderDecorator },
  ],
}
```

--------------------------------

### Custom Head Component for Astrobook

Source: https://github.com/ocavue/astrobook/blob/master/README.md

Provide a path to an Astro component to inject custom tags into the `<head>` of your Astrobook site. This example shows how to load custom fonts and apply global styles.

```astro
<!-- 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>
```

--------------------------------

### No Hoisting Example with Multiple Exports

Source: https://context7.com/ocavue/astrobook/llms.txt

If a story file exports multiple named stories, or if the single story name does not match the module name, hoisting will not occur. Both exports will appear under the module name in the sidebar.

```typescript
// NoHoistMultiple.stories.ts — multiple exports: no hoisting
import Counter from '../astro/AstroCounter.astro'

export default { component: Counter }

// Two exports → no hoisting, both appear under "NoHoistMultiple"
export const Default = {}
export const NoHoistMultiple = {}
```

--------------------------------

### Write Astrobook Stories

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Example of a component story file using Astrobook's compatible subset of Storybook's Component Story Format v3. It defines a default export for the component and named exports for different story states with arguments.

```typescript
// 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,
}
```

--------------------------------

### Configure Astrobook Subpath with Base Path

Source: https://github.com/ocavue/astrobook/blob/master/README.md

Demonstrates configuring both Astro's `base` path and Astrobook's `subpath`. Astrobook will be available at the combined path (e.g., `/docs/playground`).

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

export default defineConfig({
  base: '/docs',
  integrations: [
    astrobook({
      subpath: '/playground',
    }),
  ],
})
```

--------------------------------

### Configure Astro Project Base and Astrobook Subpath

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Illustrates how Astro's 'base' configuration interacts with Astrobook's 'subpath' option. Astrobook will be available at '/docs/playground' if the Astro project's base is '/docs'.

```js
import { defineConfig } from 'astro/config'
import astrobook from 'astrobook'

export default defineConfig({
  base: '/docs',
  integrations: [
    astrobook({
      subpath: '/playground',
    }),
  ],
})
```

--------------------------------

### Add Package Scripts

Source: https://github.com/ocavue/astrobook/blob/master/README.md

Add development, build, and preview scripts to your `package.json` file to manage your Astro project and Astrobook.

```json
"scripts": {
  "dev": "astro dev",
  "build": "astro build",
  "preview": "astro preview"
}
```

--------------------------------

### Customize Built-In Home Page with `homeContent` Option

Source: https://context7.com/ocavue/astrobook/llms.txt

Tweak the title, subtitle, version badge, and GitHub badge of the default home page. Each field can be a string, object, or `false` to hide.

```typescript
// astro.config.mjs
import { defineConfig } from 'astro/config'
import astrobook from 'astrobook'
import { version } from './package.json'

export default defineConfig({
  integrations: [
    astrobook({
      homeContent: {
        title: 'Acme UI',
        subtitle: 'Internal component library for Acme Corp',
        version: {
          label: `v${version}`,
          href: 'https://github.com/acme/ui/blob/main/CHANGELOG.md',
        },
        repo: {
          href: 'https://github.com/acme/ui',
          label: 'View on GitHub',
        },
        // To hide a field: set it to false
        // subtitle: false,
      },
    }),
  ],
})
```

--------------------------------

### Customize Built-in Homepage Content

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Configure the title, subtitle, version badge, and repository badge for the default home page. Fields can be set to custom values, `false` to hide, or omitted for defaults. This option is ignored if a custom `home` component is used.

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

import { version } from './package.json'

export default defineConfig({
  integrations: [
    astrobook({
      homeContent: {
        title: 'Acme UI',
        subtitle: 'Internal component library',
        // Display your project's own version and link to your own changelog.
        version: {
          label: `v${version}`,
          href: 'https://example.com/CHANGELOG',
        },
        // Customize the repository badge.
        repo: {
          href: 'https://github.com/acme/ui',
          label: 'View on GitHub',
        },
      },
    }),
  ],
})
```

--------------------------------

### Development-Only Activation

Source: https://context7.com/ocavue/astrobook/llms.txt

Conditionally include Astrobook using `process.env.NODE_ENV` to prevent it from being bundled into production builds when embedded in an existing Astro site.

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

export default defineConfig({
  integrations: [
    // Astrobook available at /astrobook during development only
    process.env.NODE_ENV === 'development'
      ? astrobook({ subpath: '/astrobook' })
      : null,
  ],
})
```

--------------------------------

### Configure Custom CSS

Source: https://github.com/ocavue/astrobook/blob/master/README.md

Applies custom CSS to the Astrobook site by providing a path to a CSS file using the `css` option in `astro.config.mjs`. The path is relative to the project root.

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

export default defineConfig({
  integrations: [
    astrobook({
      css: [
        // Relative path to your custom CSS file
        './src/styles/custom.css',
      ],
    }),
  ],
})
```

--------------------------------

### Activate Astrobook Integration

Source: https://context7.com/ocavue/astrobook/llms.txt

Call the `astrobook()` integration within `defineConfig.integrations` to activate Astrobook. This scans for stories, injects routes, and sets up necessary Vite virtual modules.

```typescript
// astro.config.mjs
import react from '@astrojs/react'
import { defineConfig } from 'astro/config'
import astrobook from 'astrobook'

export default defineConfig({
  integrations: [
    react(),
    astrobook(), // activates Astrobook at http://localhost:4321
  ],
})
```

--------------------------------

### Configure Astrobook Integration

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Add the astrobook integration to your Astro project's configuration file. This enables Astrobook's features within your project.

```javascript
// astro.config.mjs
import react from '@astrojs/react'
import { defineConfig } from 'astro/config'
import astrobook from 'astrobook'

// https://astro.build/config
export default defineConfig({
  integrations: [react(), astrobook()],
})
```

--------------------------------

### Inject Global CSS with `css` Option

Source: https://context7.com/ocavue/astrobook/llms.txt

Pass an array of CSS file paths to inject global styles into every Astrobook page. Supports local files and npm packages.

```typescript
// astro.config.mjs — TailwindCSS integration
import tailwindcss from '@tailwindcss/vite'
import preact from '@astrojs/preact'
import { defineConfig } from 'astro/config'
import astrobook from 'astrobook'

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
  integrations: [
    preact(),
    astrobook({
      css: [
        './src/styles/global.css',  // local file with @import 'tailwindcss'
        '@fontsource/inter',         // npm font package
      ],
    }),
  ],
})
```

--------------------------------

### Configure Astrobook Head Integration

Source: https://github.com/ocavue/astrobook/blob/master/README.md

Integrate Astrobook into your Astro project and specify a custom head component using the `head` option in `astro.config.mjs`.

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

export default defineConfig({
  integrations: [
    astrobook({
      // Relative path to your custom head component
      head: './src/components/CustomHead.astro',
    }),
  ],
})
```

--------------------------------

### Configure Multi-Framework Integrations in Astro

Source: https://context7.com/ocavue/astrobook/llms.txt

Register framework integrations like React, Preact, Solid, Svelte, and Vue in `astro.config.mjs` alongside `astrobook()` to enable multi-framework component support.

```typescript
// astro.config.mjs — multi-framework setup
import preact from '@astrojs/preact'
import react from '@astrojs/react'
import solid from '@astrojs/solid-js'
import svelte from '@astrojs/svelte'
import vue from '@astrojs/vue'
import { defineConfig } from 'astro/config'
import astrobook from 'astrobook'

export default defineConfig({
  integrations: [
    react({ include: ['**/react/*'] }),
    preact({ include: ['**/preact/*'] }),
    solid({ include: ['**/solid/*'] }),
    svelte(),
    vue(),
    astrobook({ directory: 'src/components' }),
  ],
})
```

--------------------------------

### Configure Story Directory

Source: https://github.com/ocavue/astrobook/blob/master/README.md

Configures the directory Astrobook scans for stories using the `directory` option in `astro.config.mjs`. Defaults to the current working directory.

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

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

--------------------------------

### Customize Homepage with Astro Component

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Specify a path to an Astro component to replace the default dashboard homepage. If set to `false` or if a custom component is provided, `homeContent` is ignored.

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

export default defineConfig({
  integrations: [
    astrobook({
      home: './src/components/CustomHome.astro',
    }),
  ],
})
```

--------------------------------

### Story with Cross-Framework Decorator Chains

Source: https://context7.com/ocavue/astrobook/llms.txt

Stack decorators from various frameworks (Astro, React, Preact, Svelte, Vue) in a single story to create realistic rendering environments with per-framework context providers.

```typescript
// decorators.stories.ts
import { ReactCounter } from '../react/ReactCounter'
import AstroDecorator from './AstroDecorator.astro'
import PreactDecorator from './PreactDecorator'
import ReactDecorator from './ReactDecorator'
import SvelteDecorator from './SvelteDecorator.svelte'
import VueDecorator from './VueDecorator.vue'

export default { component: ReactCounter }

export const MixedDecorators = {
  args: { step: 10 },
  decorators: [
    { component: AstroDecorator,   props: { label: 'Astro' } },
    { component: ReactDecorator,   props: { label: 'React' } },
    { component: PreactDecorator,  props: { label: 'Preact' } },
    { component: SvelteDecorator,  props: { label: 'Svelte' } },
    { component: VueDecorator,     props: { label: 'Vue' } },
  ],
}
```

--------------------------------

### Add Package Scripts

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Include these scripts in your package.json to easily manage development, building, and previewing your Astro project with Astrobook.

```json
"scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  }
```

--------------------------------

### Add Custom `<head>` Tags with `head` Option

Source: https://context7.com/ocavue/astrobook/llms.txt

Provide a path to an `.astro` or `.html` file to inject its content into the `<head>` of every Astrobook page. Useful for fonts, analytics, or meta tags.

```astro
<!-- src/components/CustomHead.astro -->
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

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

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

export default defineConfig({
  integrations: [
    astrobook({
      head: './src/components/CustomHead.astro',
    }),
  ],
})
```

--------------------------------

### Replace Home Page with `home` Option

Source: https://context7.com/ocavue/astrobook/llms.txt

Replace the default Astrobook home page with a custom Astro component or disable it entirely by setting the option to `false`.

```astro
<!-- src/components/CustomHome.astro -->
<div class="custom-home">
  <h1>My Design System</h1>
  <p>Browse and preview all UI components in one place.</p>
  <p>Select a component from the sidebar to get started.</p>
</div>

<style>
  .custom-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
  }
</style>
```

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

export default defineConfig({
  integrations: [
    astrobook({
      home: './src/components/CustomHome.astro', // or: false to disable
    }),
  ],
})
```

--------------------------------

### Configure .gitignore

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Update your .gitignore file to exclude build output and generated types, ensuring these are not committed to your version control.

```gitignore
# build output
dist/
# generated types
.astro/
```

--------------------------------

### Scope Story Discovery with `directory` Option

Source: https://context7.com/ocavue/astrobook/llms.txt

Use the `directory` option to limit story discovery to a specific folder, relative to the Astro project root. Defaults to scanning the entire project.

```typescript
// astro.config.mjs
import react from '@astrojs/react'
import { defineConfig } from 'astro/config'
import astrobook from 'astrobook'

export default defineConfig({
  integrations: [
    react(),
    // Only scan src/components for *.stories.* files
    astrobook({ directory: 'src/components' }),
  ],
})
```

--------------------------------

### Set Website Title

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Configure the main title for your Astrobook website.

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

export default defineConfig({
  integrations: [
    astrobook({
      title: 'My Components Playground',
    }),
  ],
})
```

--------------------------------

### Customize Route Layout with `dashboardSubpath` / `previewSubpath`

Source: https://context7.com/ocavue/astrobook/llms.txt

Override the internal URL structure for the dashboard and preview pages using `dashboardSubpath` and `previewSubpath`. Both options must be distinct values.

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

// Dashboard: /components-subpath/...
// Preview:   /preview-subpath/...
export default defineConfig({
  integrations: [
    astrobook({
      subpath: '/astrobook-subpath',
      dashboardSubpath: '/components-subpath',
      previewSubpath: '/preview-subpath',
    }),
  ],
})
```

--------------------------------

### Conditionally Enable Astrobook for Development

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Enable Astrobook integration only during development by checking the `NODE_ENV` environment variable. This prevents Astrobook from being included in production builds.

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

// https://astro.build/config
export default defineConfig({
  integrations: [
    // On development, Astrobook is available at http://localhost:4321/astrobook.
    // On production, Astrobook is not included.
    process.env.NODE_ENV === 'development'
      ? astrobook({ subpath: '/astrobook' })
      : null,
  ],
})
```

--------------------------------

### Embed Astrobook with `subpath` Option

Source: https://context7.com/ocavue/astrobook/llms.txt

Mount Astrobook at a subpath relative to the Astro base URL using the `subpath` option. This allows running Astrobook alongside an existing Astro site.

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

// Astrobook available at http://localhost:4321/docs/playground
export default defineConfig({
  base: '/docs',
  integrations: [
    astrobook({ subpath: '/playground' }),
  ],
})
```

--------------------------------

### Story with Mixed Framework Decorators

Source: https://context7.com/ocavue/astrobook/llms.txt

Apply multiple decorators from different frameworks (React, Astro) to a single story. Decorators are applied outermost-first, allowing for complex wrapping scenarios.

```typescript
// Button.stories.ts
import AstroRedBorder from './AstroRedBorderDecorator.astro'
import { Button, type ButtonProps } from './Button.tsx'
import { GreenBorderDecorator } from './ReactGreenBorderDecorator.tsx'

export default { component: Button }

// Renders: GreenBorder > RedBorder > Button
export const Decorated = {
  args: { variant: 'primary' } satisfies ButtonProps,
  decorators: [
    { component: GreenBorderDecorator, props: { width: 10 } },
    { component: AstroRedBorder },
  ],
}
```

--------------------------------

### Customize Head with Astro Component

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Provide a path to an Astro component to inject custom tags into the `<head>` of your Astrobook site. This component should only contain elements permitted within the `<head>` tag.

```astro
<!-- 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>
```

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

export default defineConfig({
  integrations: [
    astrobook({
      // Relative path to your custom head component
      head: './src/components/CustomHead.astro',
    }),
  ],
})
```

--------------------------------

### Toggle Theme in Iframe with JavaScript

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

Use this method to toggle the theme of an Astrobook instance embedded within an iframe. Ensure the iframe's content window is accessible.

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

--------------------------------

### Toggle Astrobook Theme via postMessage

Source: https://context7.com/ocavue/astrobook/llms.txt

Use this script on the parent page to send a message to an embedded Astrobook iframe to change its theme. Ensure the iframe is correctly selected and the message payload includes the desired theme ('dark' or 'light').

```javascript
const iframe = document.querySelector('#astrobook-iframe')
const theme = 'dark' // or 'light'

iframe.contentWindow.postMessage(
  { type: 'astrobook:set-theme', theme },
  '*'
)
```

--------------------------------

### Astro Red Border Decorator

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

An Astro decorator component that adds a red border to its children using a slot.

```astro
<div style="border: solid 2px red;">
  <slot />
</div>
```

--------------------------------

### Configure Astrobook Subpath

Source: https://github.com/ocavue/astrobook/blob/master/README.md

Specifies the subpath for Astrobook within an existing Astro project using the `subpath` option in `astro.config.mjs`. This allows Astrobook to be accessed at a specific URL segment.

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

export default defineConfig({
  integrations: [
    astrobook({
      subpath: '/playground',
    }),
  ],
})
```

--------------------------------

### Astro Red Border Decorator

Source: https://github.com/ocavue/astrobook/blob/master/README.md

An Astro decorator that adds a red border to a component. It uses a slot to render its children within the bordered div.

```astro
<!-- AstroRedBorderDecorator.astro -->
<div style="border: solid 2px red;">
  <slot />
</div>
```

--------------------------------

### React Decorator Component for Story Wrapping

Source: https://context7.com/ocavue/astrobook/llms.txt

A React component that acts as a decorator, wrapping its children with a styled border. It accepts a `width` prop for the border thickness.

```tsx
// ReactGreenBorderDecorator.tsx
import type { ReactNode } from 'react'

export function GreenBorderDecorator({
  width = 2,
  children,
}: {
  width?: number
  children?: ReactNode
}) {
  return <div style={{ border: `solid ${width}px green` }}>{children}</div>
}
```

--------------------------------

### Set Browser Tab Title with `title` Option

Source: https://context7.com/ocavue/astrobook/llms.txt

Sets the `<title>` tag for all Astrobook pages, which appears in browser tabs and page metadata.

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

export default defineConfig({
  integrations: [
    astrobook({
      title: 'Acme Design System',
    }),
  ],
})
```

--------------------------------

### React Green Border Decorator

Source: https://github.com/ocavue/astrobook/blob/master/packages/astrobook/README.md

A React decorator component that adds a green border to its children. It accepts a 'width' prop to control the border thickness.

```tsx
import type { ComponentChildren } from 'react'

export function GreenBorderDecorator({
  width = 2,
  children,
}: { width?: number
  children?: ComponentChildren
}) {
  return <div style={{ border: `solid ${width}px green` }}>{children}</div>
}
```

--------------------------------

### React Green Border Decorator

Source: https://github.com/ocavue/astrobook/blob/master/README.md

A React decorator that adds a green border to a component. It accepts a width prop for border thickness. Children are rendered within the bordered div.

```tsx
// ReactGreenBorderDecorator.tsx

import type { ComponentChildren } from 'react'

export function GreenBorderDecorator({
  width = 2,
  children,
}: { 
  width?: number
  children?: ComponentChildren
}) {
  return <div style={{ border: `solid ${width}px green` }}>{children}</div>
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.