Component · C-002

Panel

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.

Install

Install koten-theme first when the project has no Koten tokens yet.

npx shadcn@latest add https://koten.codehive.com.co/r/panel.json

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.

Read the whole page

Markdown page
Agent index (llms.txt)
Full documentation (llms-full.txt)