Shells
Full-page layout frames — the outermost component of every route. Shown as scaled framed previews; shells with meaningful variants render every one via labeled rows.
PageLayout
Universal page wrapper. Applies theme / mode / shape / density attributes + skip-link.
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.DashboardLayout
Sidebar + topbar + main. Sidebar on either side.
DocsLayout
Three-column documentation shell (sidebar + prose + TOC). Prose and wide content widths.
Installation
Run bun add @idinstudio/ui @idinstudio/tokens to install the library. Content width: prose.
Installation
Run bun add @idinstudio/ui @idinstudio/tokens to install the library. Content width: wide.
AuthLayout
Auth page with brand + form. Every variant — centered and split.
Welcome back
Sign in to your workspace to continue.
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. Every left-pane width plus the sticky-left option.
Aside
Left pane (1/4).
Article
Right pane. Split collapses at the chosen breakpoint.
Aside
Left pane (1/3).
Article
Right pane. Split collapses at the chosen breakpoint.
Aside
Left pane (1/2).
Article
Right pane. Split collapses at the chosen breakpoint.
Aside
Left pane (2/3).
Article
Right pane. Split collapses at the chosen breakpoint.