---
title: "Tategaki"
description: "Vertical text (vertical-rl) for editorial labels. It is hidden on mobile and from screen readers by default, because it is an accent rather than essential content."
kind: component
id: C-025
registry: "tategaki"
docs: "https://koten.codehive.com.co/components/tategaki"
markdown: "https://koten.codehive.com.co/md/components/tategaki.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/tategaki.json"
language: en
---

# Tategaki · 縦書き

> Component C-025 in the Koten UI catalog.

Vertical text (vertical-rl) for editorial labels. It is hidden on mobile and from screen readers by default, because it is an accent rather than essential 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/tategaki.json

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

## Files

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

## Examples

### Vertical label

It accompanies a horizontal block and disappears on mobile; the body remains the source of information.

```tsx
<div className="flex items-start justify-between gap-[var(--koten-gap)]">
  <p className="max-w-sm text-xs text-muted">…</p>
  <Tategaki className="text-base">古典のデザイン</Tategaki>
</div>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `decorative` | `boolean` | `true` | true hides it from screen readers; pass false only when the vertical text is real content. |
| `children` | `ReactNode` | `—` | Short Japanese text; for a long sentence, use horizontal body copy. |
| `className` | `string` | `—` | Lets you raise the size or change the color; by default it uses text-xs and text-faint. |

## Accessibility

- decorative hides the block from screen readers: it must not be the only place information lives.
- It is hidden on mobile so it does not steal width; if it is real content, also offer the horizontal version.
- It replaces neither the title nor the body: it is a short, optional label.

## Sources

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