# MDX Page + Registry Example Boilerplate

The templates for the two files a component doc page needs beyond its story: the MDX page in `apps/docs/content/docs/components/` and the registry example(s) in `apps/docs/registry/`. The live, maintained versions are `apps/docs/content/docs/components/button.mdx`, `apps/docs/registry/example/button-default.tsx`, and the Button entries in `apps/docs/registry/registry-examples.ts` — read those to see the current shape; the templates below are the fill-in-the-blanks starting point.

## MDX page

Create `apps/docs/content/docs/components/<component>.mdx`. The frontmatter `description` should match the wrapper's JSDoc lead sentence so the page and the generated API docs agree. Each `<ComponentPreview name="..." />` renders a registry example by name — every name you reference here must have a matching registry entry and example file.

```mdx
---
title: Component Name
description: Brief description of what the component does and when to use it.
---

Detailed description of the component, its purpose, and common use cases. 2-3 sentences
that help a developer understand when and why to use it.

## Example

<ComponentPreview name="component-default" />

## Installation

```bash
npm install @strongtie/design-system
```

```tsx
import { Component } from "@strongtie/design-system/component"
```

## Props

### `<Component>`

| Prop      | Type                        | Default     | Description                   |
| --------- | --------------------------- | ----------- | ----------------------------- |
| `variant` | `"default" \| "secondary"`  | `"default"` | Visual style of the component |
| `size`    | `"default" \| "sm" \| "lg"` | `"default"` | Size of the component         |

## Examples

<ComponentPreview name="component-default" />

### Variants

<ComponentPreview name="component-variants" />

## Styling

Components can be styled using the `className` prop. The design system uses Tailwind CSS.

### Classes

- `component-name`

## Accessibility

Ensure proper accessibility attributes are added when implementing this component.
```

## Registry example component

Create one file per example under `apps/docs/registry/example/`. Each is a client component that renders the real published component from its sub-path. The file's default export name is PascalCase of the registry `name`.

```tsx
// component-default.tsx
"use client"

import { Component } from "@strongtie/design-system/component"

export default function ComponentDefault() {
  return <Component>Default content</Component>
}
```

```tsx
// component-variants.tsx
"use client"

import { Component } from "@strongtie/design-system/component"

export default function ComponentVariants() {
  return (
    <div className="flex gap-4">
      <Component variant="default">Default</Component>
      <Component variant="secondary">Secondary</Component>
    </div>
  )
}
```

## Registry entry

Add one object per example to the array in `apps/docs/registry/registry-examples.ts`. The `name` is what `<ComponentPreview name="..." />` looks up, and `path` points at the example file you just created.

```ts
{
  name: "component-default",
  type: "registry:example",
  title: "Component Default",
  description: "Default component example.",
  registryDependencies: [],
  files: [
    {
      path: "example/component-default.tsx",
      type: "registry:example",
    },
  ],
},
{
  name: "component-variants",
  type: "registry:example",
  title: "Component Variants",
  description: "Component variant examples.",
  registryDependencies: [],
  files: [
    {
      path: "example/component-variants.tsx",
      type: "registry:example",
    },
  ],
},
```