Block · C-053 · erp

AppShell

The back office frame: a 232 px sidebar, a sticky topbar and a flexible main. The skip link comes first and the content changes routes without remounting the frame.

Install

Blocks compose Koten primitives; install koten-theme first.

npx shadcn@latest add https://koten.codehive.com.co/r/app-shell.json

Requirements

• Client rendering: The shell keeps the active navigation item in state. In an SSR framework, mount the shell inside a client boundary so the interaction survives.

Anatomy

This block composes Koten primitives. Read the source files before changing it.

• @/components/patterns/app-shell.tsx
• @/lib/koten/cn.ts
• @/lib/koten/format.ts
• @/lib/koten/intl.ts
• @/lib/koten/labels.ts
• @/lib/koten/provider.tsx

Accessibility

• The skip link is the first focusable element and jumps to the main with id contenido.
• The aside is a complementary landmark named by sidebarLabel; the inner navigation carries its own name.
• Below 1024 px the sidebar is not shown: the mobile menu belongs in the TopBar, not duplicated while hidden.
• The skip link is visible only on focus; do not hide it with outline: none.

Read the whole page

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

Koten UI · llms.txt · llms-full.txt · Markdown