Overview
Main content renders here, inside the sticky topbar + sidebar shell.
Shells
Full-page layout frames — the outermost component of every route.
PageLayout
Universal page wrapper. Applies theme / mode / shape / density attributes + skip-link.
PageLayout wraps the whole app. It emits
data-theme, data-theme-mode, data-shape, and data-density attributes so every downstream component resolves tokens in the correct brand context. The skip link is keyboard-only.<PageLayout theme="idinstudio" themeMode="light">…</PageLayout>DashboardLayout
Sidebar + topbar + main. Compact preview.
DocsLayout
Three-column documentation shell (sidebar + prose + TOC).
Installation
Run bun add @idinstudio/ui @idinstudio/tokens to install the library.
AuthLayout
Centered or split auth page with brand + form.
Idin Studio
Welcome back
Sign in to your workspace to continue.
MarketingLayout
Navbar + main + footer scaffold for public pages.
Pragmatic products, shipped fast.
A compact marketing-layout preview.
SplitLayout
Two-pane layout with sticky option.
Aside
Left-pane column (1/3).
Article
Right-pane content (2/3). Split collapses at the chosen breakpoint.