Overview
Main content renders inside the sticky topbar + left sidebar shell.
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.
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" shape="soft" density="regular">…</PageLayout>DashboardLayout
Sidebar + topbar + main. Sidebar on either side.
sidebar left
sidebar right
<DashboardLayout sidebar={<Sidebar…/>} topbar={…} sidebarSide="left">…</DashboardLayout>DocsLayout
Three-column documentation shell (sidebar + prose + TOC). Prose and wide content widths.
content prose
Installation
Run bun add @idinstudio/ui @idinstudio/tokens to install the library. Content width: prose.
content wide
Installation
Run bun add @idinstudio/ui @idinstudio/tokens to install the library. Content width: wide.
<DocsLayout sidebar={…} toc={…} contentWidth="prose">…</DocsLayout>AuthLayout
Auth page with brand + form. Every variant — centered and split.
centered
Idin Studio
Welcome back
Sign in to your workspace to continue.
split
Idin Studio
Welcome back
Sign in to your workspace to continue.
<AuthLayout variant="centered" brand={…} heading="Welcome back">…</AuthLayout>MarketingLayout
Navbar + main + footer scaffold for public pages.
Pragmatic products, shipped fast.
A compact marketing-layout preview.
<MarketingLayout navbar={<Navbar…/>} footer={<Footer…/>}>…</MarketingLayout>SplitLayout
Two-pane layout. Every left-pane width plus the sticky-left option.
left 1/4
Aside
Left pane (1/4).
Article
Right pane. Split collapses at the chosen breakpoint.
left 1/3
Aside
Left pane (1/3).
Article
Right pane. Split collapses at the chosen breakpoint.
left 1/2
Aside
Left pane (1/2).
Article
Right pane. Split collapses at the chosen breakpoint.
left 2/3
Aside
Left pane (2/3).
Article
Right pane. Split collapses at the chosen breakpoint.
<SplitLayout leftWidth="1/3" gap="md" leftPane={…} rightPane={…} />