---
title: "Pattern"
description: "A decorative background with two traditional patterns, seigaiha and asanoha, drawn in SVG with currentColor at 8%. It is always aria-hidden and lives behind non-critical content."
kind: component
id: C-026
registry: "pattern"
docs: "https://koten.codehive.com.co/components/pattern"
markdown: "https://koten.codehive.com.co/md/components/pattern.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/pattern.json"
language: en
---

# Pattern · 文様

> Component C-026 in the Koten UI catalog.

A decorative background with two traditional patterns, seigaiha and asanoha, drawn in SVG with currentColor at 8%. It is always aria-hidden and lives behind non-critical content.

> 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/pattern.json

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

## Files

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

## Examples

### Two patterns

Seigaiha draws concentric waves and asanoha a hemp-leaf lattice; both inherit the text color.

```tsx
<div className="relative h-32 overflow-hidden border border-rule bg-surface">
  <Pattern variant="seigaiha" className="absolute inset-0" />
</div>
<div className="relative h-32 overflow-hidden border border-rule bg-surface">
  <Pattern variant="asanoha" className="absolute inset-0" />
</div>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `variant` | `seigaiha \| asanoha` | `seigaiha` | Switches the SVG drawing; the tile size is fixed so the pattern never distorts. |
| `className` | `string` | `—` | Used with absolute inset-0 inside a relative container with overflow-hidden. |

## Accessibility

- Pattern is always aria-hidden: the SVG carries no information and must not be announced.
- It lives behind non-critical content and never behind dense text.
- Its color comes from currentColor at 8% opacity; do not raise it to compensate for contrast.

## Sources

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