Layout

General-purpose page header with optional subtitle and action slot.

<script lang="ts">
  import { Header, Button } from '@repo/components'
</script>

<Header title="Employees" subtitle="MANAGEMENT">
  <Button.Root variant="success" size="sm">+ Add</Button.Root>
</Header>

Props

Prop	Type	Description
`title`	`string`	Main heading text
`subtitle`	`string`	Supporting text above the title
`children`	`Snippet`	Action buttons rendered beside title

Also accepts all HTMLDivElement attributes.

DetailHeader

Extends Header with a built-in delete confirmation button. Used on detail/edit pages.

<script lang="ts">
  import { DetailHeader } from '@repo/components'
  import { deleteEmployeeForm } from './employee.remote'
</script>

<DetailHeader title="Employee" subtitle="DETAIL" deleteForm={deleteEmployeeForm}>
  <Button.Root variant="cta" size="sm">Save</Button.Root>
</DetailHeader>

Props

Inherits all Header props, plus:

Prop	Type	Description
`deleteForm`	`RemoteForm<Input, Output> \| boolean`	Remote form for delete action. Pass `false` to hide.

InsertHeader

Header with a built-in "Discard" button that calls history.back(). Used on create/insert pages.

<script lang="ts">
  import { InsertHeader, Button } from '@repo/components'
</script>

<InsertHeader title="New Employee">
  <Button.Root type="submit" variant="cta" size="sm">Create</Button.Root>
</InsertHeader>

Props

Prop	Type	Description
`title`	`string`	Heading text (required)
`children`	`Snippet`	Additional action buttons

AppSidebar

Configurable sidebar navigation built on the shadcn-svelte Sidebar primitive. It supports header and footer snippets, grouped navigation, nested items, route highlighting, and a user menu.

<script lang="ts">
  import { page } from '$app/state'
  import type { Menus } from '@repo/components'
  import { AppSidebar, NavMain, Sidebar } from '@repo/components'
  import LayoutDashboard from '@lucide/svelte/icons/layout-dashboard'
  import Settings from '@lucide/svelte/icons/settings'

  const organizationMenu = {
    items: [{ title: 'Acme Inc', href: '/' }],
  }

  const menu: Menus = {
    main: [
      {
        title: 'Platform',
        items: [
          { title: 'Dashboard', icon: LayoutDashboard, href: '/dashboard' },
          { title: 'Settings', icon: Settings, href: '/settings' },
        ],
      },
    ],
  }
</script>

{#snippet sidebarHeader()}
  <NavMain class="p-0" menu={organizationMenu} pathname={page.url.pathname} />
{/snippet}

<Sidebar.Provider>
  <AppSidebar header={sidebarHeader} {menu} pathname={page.url.pathname} />
  <Sidebar.Inset><!-- Page content --></Sidebar.Inset>
</Sidebar.Provider>

Props

Prop	Type	Description
`header`	`Snippet`	Content above the navigation
`menu`	`Menus`	Main and secondary navigation groups
`user`	`UserMenu`	User avatar and dropdown menu
`footer`	`Snippet`	Additional footer content
`pathname`	`string`	Current path used to highlight links
`variant`	Sidebar variant	Defaults to `inset`
`collapsible`	Sidebar collapsible mode	Defaults to `offcanvas`

interface MenuItem {
  title: string
  icon?: Component
  href?: string
  onclick?: () => void
  items?: ShallowMenuItem[]
  isActive?: boolean
  open?: boolean
  show?: () => boolean
  button?: Snippet
}

interface Menus {
  main?: Menu[]
  secondary?: Menu
}

href and onclick are mutually exclusive. An item without either is a submenu-only parent.

Responsive website navigation. Groups render as a navigation menu on desktop and collapsibles in a mobile sheet.

<script lang="ts">
  import { page } from '$app/state'
  import { TopBar } from '@repo/components'

  const menuItems: TopBar.MenuItem[] = [
    { title: 'Home', href: '/' },
    {
      title: 'Products',
      items: [
        { title: 'All', href: '/products' },
        { title: 'New', href: '/products/new' },
      ],
    },
  ]
</script>

<TopBar.Root {menuItems} pathname={page.url.pathname}>
  {#snippet logo()}
    <img src="/logo.svg" alt="Company" />
  {/snippet}
</TopBar.Root>

Exports

Export	Description
`TopBar.Root`	Responsive navigation component
`TopBar.MenuItem`	Link or grouped-link configuration type
`TopBar.TopBarLink`	Individual navigation link type

Header

Props

DetailHeader

Props

InsertHeader

Props

AppSidebar

Props

Menu types

TopBar

Exports

On this page