Vela UI Docs
venizia.ai

App layout

An empty app shell: a collapsible sidebar with three navigation groups and an account card, and a header with notifications, a theme switch and the plan.

@velaui/app-layoutOpen Open
pnpm dlx velaui add @velaui/app-layout

On this screen

  1. Collapsible sidebar with three navigation groups
  2. Account card at the foot of the sidebar
  3. Header with notifications
  4. Theme switch
  5. Current plan

Mount it in a route

// app/(app)/layout.tsx
import { AppLayout } from "@/blocks/app-layout/app-layout"

export default function Layout({ children }) {
  return <AppLayout>{children}</AppLayout>
}