---
title: "Section"
description: "A block of text with one accessory beside it — a thumbnail, or a button."
---

A block of text with one accessory beside it — a thumbnail, or a button. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Section — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add section
```

Files written — React: components/ui/section.tsx. Vue: components/ui/section/Section.vue, components/ui/section/SectionAccessory.vue, components/ui/section/SectionContent.vue, components/ui/section/SectionHeading.vue, components/ui/section/SectionThumbnail.vue, components/ui/section/index.ts.

## Usage

React:

```tsx
import { Section } from "@/components/ui/section"
```

Vue:

```ts
import { Section, SectionAccessory, SectionContent, SectionHeading, SectionThumbnail } from "@/components/ui/section"
```

## API reference

**`Section`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children / default slot` | `React.ReactNode / Vue slot` | — | Content rendered inside the component. |
| `className / class` | `string` | — | Additional classes merged with the component defaults. |

## Accessibility

Preserve the native semantics of the rendered elements and pass through ARIA attributes when the surrounding context needs a label or description. Any interactive child needs a visible focus indicator, and meaning must not rely on colour alone.

## Tokens

Section reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.