---
title: "Panel"
description: "The basic unit of composition in Koten: a bordered section with a tinted header, a body using density padding and a footer for actions. It replaces the decorative card and needs neither shadow nor large radii."
kind: component
id: C-002
registry: "panel"
docs: "https://koten.codehive.com.co/components/panel"
markdown: "https://koten.codehive.com.co/md/components/panel.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/panel.json"
language: en
---

# Panel · 枠

> Component C-002 in the Koten UI catalog.

The basic unit of composition in Koten: a bordered section with a tinted header, a body using density padding and a footer for actions. It replaces the decorative card and needs neither shadow nor large radii.

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

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

## Files

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

## Examples

### Composition

Header, body and footer in reading order; actions sit on the right side of the header.

```tsx
<Panel tone="accent">
  <PanelHeader>
    <PanelTitle as="h3">Today's orders</PanelTitle>
    <PanelActions>
      <Badge tone="info" appearance="solid">12</Badge>
    </PanelActions>
  </PanelHeader>
  <PanelBody>
    <dl>…</dl>
  </PanelBody>
  <PanelFooter>
    <Button size="sm" variant="outline">View all</Button>
  </PanelFooter>
</Panel>
```

### Tones

plain uses the surface, tinted the tint background, and accent adds a 3 px primary bar on the left.

```tsx
<Panel tone="plain">…</Panel>
<Panel tone="tinted">…</Panel>
<Panel tone="accent">…</Panel>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `tone` | `plain \| tinted \| accent` | `plain` | accent draws a 3 px primary bar on the inline start edge; the other tones only change the background. |
| `PanelBody flush` | `boolean` | `false` | Removes padding for full-bleed tables and lists; everything else keeps --koten-panel-p. |
| `PanelTitle as` | `h2 \| h3 \| h4` | `h2` | Choose the heading level from the page hierarchy, not from the size. |

## Accessibility

- Panel is a bordered <section>; it does not replace landmarks and never uses tables for layout.
- The header uses <header> and the footer <footer>; the title keeps its level through as.
- Actions come after the title in the DOM to keep the reading order.
- flush is reserved for tabular content or full-bleed lists where padding gets in the way.

## Sources

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