---
title: "SectionHeader"
description: "A section header with a primary bar, title, optional Japanese label, meta and actions, closed by a rule. It organizes the page without adding containers."
kind: component
id: C-016
registry: "section-header"
docs: "https://koten.codehive.com.co/components/section-header"
markdown: "https://koten.codehive.com.co/md/components/section-header.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/section-header.json"
language: en
---

# SectionHeader · 見出し

> Component C-016 in the Koten UI catalog.

A section header with a primary bar, title, optional Japanese label, meta and actions, closed by a rule. It organizes the page without adding containers.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/section-header.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/section-header.json
```

## Files

- `@/components/ui/section-header.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Examples

### With actions

Title and meta share a block; actions align to the end and wrap below on mobile.

```tsx
<SectionHeader
  title="Recent orders"
  jp="注文"
  meta="Last 7 days"
  actions={<Button size="sm" variant="outline">Filter</Button>}
/>
```

### Double rule

rule="double" marks a major section break; use as so the hierarchy stays intact.

```tsx
<SectionHeader
  as="h3"
  title="Specifications"
  jp="仕様"
  meta="Product HIKARI K-1"
  rule="double"
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `title` | `ReactNode` | `—` | Heading content; it is also the accessible name of the section. |
| `jp` | `ReactNode` | `—` | Secondary Japanese label shown muted next to the title. |
| `meta` | `ReactNode` | `—` | Context line under the title: period, count or state. |
| `actions` | `ReactNode` | `—` | Aligned to the end of the header; takes one or more controls. |
| `rule` | `hairline \| strong \| double \| none` | `strong` | Rule closing the header; double is for major breaks and none for headers inside a panel. |
| `as` | `h2 \| h3 \| h4` | `h2` | Heading level; choose it from the real document hierarchy. |

## Accessibility

- The title is a real heading: use as so levels are never skipped.
- The primary bar is aria-hidden because it is decoration, not information.
- jp is a secondary label; never repeat the title text in it.
- Actions are read after the title and meta, following the DOM order.

## Sources

- Catalog page: https://koten.codehive.com.co/components/section-header
- Markdown: https://koten.codehive.com.co/md/components/section-header.md
- Repository: https://github.com/codehive-colombia/koten