# ComponentPreview

> A live preview written as a tag. Names the component in an attribute and passes the rest through.

Source: https://shelldocs.shellui.dev/docs/components/component-preview

`ComponentPreview` is a preview written as a tag instead of a fence. The target component goes in `Component`, every other attribute is forwarded to it, and the Code tab shows the tag you would write in Razor.

> **Prefer the fence**
>
> A `razor:preview` fence reads better in the page source and keeps your formatting in the Code tab. Use `ComponentPreview` when a preview has to sit inside another tag's body, such as a `Step` or a `Tab`, where a fence would need blank lines around it.

## Basic use

**Hello**

```razor
<Callout Variant="info">Body text written on the tag.</Callout>
```

```markdown
<ComponentPreview Component="Callout" Variant="info" Title="Hello">Body text written on the tag.</ComponentPreview>
```

## Fence or tag

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `Code tab` | `fence` |  | Shows the fence body exactly as written, including indentation and comments. |
| `Code tab` | `tag` |  | Rebuilt from the component name, the attributes in alphabetical order, and the body. |
| `Several components` | `fence` |  | A fence can hold sibling tags and wrapper elements. |
| `One component` | `tag` |  | A tag previews exactly one component. |

## Forwarded attributes

Attributes other than `Component` and `Layout` are forwarded to the target, converted to each parameter's type the same way a fence converts them. A value that can't be converted is skipped with a logged warning and the component still renders.

**Forwarded**

```razor
<Card Description="Title and Description went straight to Card." />
```

## Child content

The body is parsed as Razor, like a fence body, so nested tags stay where you put them and nothing is wrapped in a paragraph. Direct child tags that match one of the target's `RenderFragment` parameters go into that slot.

## Generic components

Close a generic target with a type-parameter attribute, as in Razor:

```markdown
<ComponentPreview Component="DataGrid" TItem="Product" />
```

See [razor:preview](https://shelldocs.shellui.dev/docs/authoring/razor-preview.md) for the accepted type spellings.

## Layout

`Layout="stretch"` lets a block-level target fill the frame. `Layout="scroll"` lets a wide one scroll on small screens. See [PreviewFrame](https://shelldocs.shellui.dev/docs/components/preview-frame.md).

## Unknown component

When `Component` doesn't match a registered type, the frame shows an error panel naming the tag. Register the assembly:

```csharp
builder.Services.AddShellDocs(o =>
{
    o.RegisterComponentsFromAssembly<MyMarker>();
});
```

## Code tabs

`<CodeTab>` children replace the generated tag in the Code panel. They are taken out of the body first, so the target component never receives them as child content. `SyncKey` and `Caption` work as on `DemoPreview`. See [Code tabs on previews](https://shelldocs.shellui.dev/docs/components/code-tabs.md).

## Props

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `Component` (required) | `string` | `—` | Tag name of the component to preview. |
| `Layout` | `string?` | `center` | center, stretch or scroll. |
| `SyncKey` | `string?` | `—` | Sync key for its code tabs. |
| `Caption` | `string?` | `PreviewCaption` | Muted note in the toolbar. |
| `ChildContent` | `RenderFragment?` | `—` | Passed to the target as its child content. |
| `other attributes` | `any` | `—` | Forwarded to the target component. |

## See also

- [PreviewFrame](https://shelldocs.shellui.dev/docs/components/preview-frame.md): The frame, its toolbar and layouts.
- [DemoPreview](https://shelldocs.shellui.dev/docs/components/demo-preview.md): Previews of components that need their own code block.