# Shared types

> Types that every section uses: heading levels, image and link components you can replace, and call-to-action items.

Facade UI item `types` (lib).
Docs page: https://facadeui.dev/components/types · Registry JSON: https://facadeui.dev/r/types.json

## Install

```bash
npx shadcn@latest add @facade/types
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/types.json`. The CLI also installs nothing else.

Files: `lib/types.ts`

## Props

### FacadeImageProps

The image props that sections pass to your image component. All are valid DOM
attributes, so the default `"img"` element works, and they also match `next/image`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` (required) | `string` |  |  |
| `alt` (required) | `string` |  | Required. Pass `""` only for decorative images. |
| `width` | `number` |  |  |
| `height` | `number` |  |  |
| `className` | `string` |  |  |
| `sizes` | `string` |  |  |
| `loading` | `"eager" \| "lazy"` |  |  |
| `decoding` | `"async" \| "auto" \| "sync"` |  |  |
| `fetchPriority` | `"high" \| "low" \| "auto"` |  |  |

### FacadeLinkProps

The link props that sections pass to your link component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `href` (required) | `string` |  |  |
| `children` | `ReactNode` |  |  |
| `className` | `string` |  |  |
| `target` | `string` |  |  |
| `rel` | `string` |  |  |
| `aria-current` | `"page" \| "step" \| "location" \| "date" \| "time" \| "true" \| "false"` |  |  |
| `aria-label` | `string` |  |  |

### ListSlotProps

Lets you replace the elements a section uses for its list.

By default a section renders `ul` and `li`. The `-motion` variant passes `Stagger` and
`StaggerItem` instead, so items animate one by one while the static file imports
nothing from `motion`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `listAs` | `ElementType` |  | Wraps the list. Defaults to `"ul"`. |
| `itemAs` | `ElementType` |  | Wraps each item. Defaults to `"li"`. |

### StackSlotProps

The same as `ListSlotProps`, for sections made of stacked blocks instead of a list,
such as heroes and CTA bands.

By default a section renders `div`s. The `-motion` variant passes `Stagger` and
`StaggerItem`, so the eyebrow, headline, text and buttons appear in sequence.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `stackAs` | `ElementType` |  | Wraps the content stack. Defaults to `"div"`. |
| `blockAs` | `ElementType` |  | Wraps each block in the stack. Defaults to `"div"`. |

### SectionBaseProps

Props shared by every section.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `headingLevel` | `HeadingLevel` |  | Heading level for the section's own title. Defaults to `2`. |
| `as` | `"section" \| "div" \| "article" \| "aside"` |  | Root element. Defaults to `"section"`. Use `"div"` when it is already inside a `<section>`. |
| `className` | `string` |  |  |
| `spacing` | `"sm" \| "md" \| "lg" \| "none"` |  | Vertical spacing. Uses the `--facade-section-y*` tokens. |
| `id` | `string` |  |  |