Layout Components

Header

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	Uppercase label 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'

  // remoteForm from your *.remote.ts
  const deleteForm = ...
</script>

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

Props

Inherits all Header props, plus:

Prop	Type	Description
deleteForm	RemoteForm<any, any> | 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. Supports header menus, main/sub navigation groups, and a user menu.

<script lang="ts">
  import { AppSidebar } from '@repo/components'
  import type { Menus, UserMenu, Menu } from '@repo/components'

  const header: Menu = {
    items: [{ title: 'Acme Inc', action: 'link:/' }]
  }

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

<AppSidebar {header} {menu} />

Props

Prop	Type	Description
header	Menu	Top section of the sidebar
menu	Menus	Main and sub navigation groups
user	UserMenu	User avatar and dropdown menu

Menu types

interface MenuItem {
  title: string
  icon?: Component
  action: `form:${string}` | `link:${string}` | (() => void)
  items?: MenuItem[]    // nested sub-items
  open?: boolean
  show?: () => boolean  // conditional visibility
  button?: Snippet
}

interface Menus {
  main?: Menu[]  // primary nav groups
  sub?: Menu     // secondary nav (pinned to bottom)
}

TopBar

Horizontal navigation bar with support for desktop items, mobile items, and dropdown menus.

<script lang="ts">
  import { TopBar } from '@repo/components'
  import type { MenuItem } from '@repo/components'

  const items: MenuItem[] = [
    { title: 'Home', url: '/' },
    { title: 'Products', children: [
      { title: 'All', url: '/products' },
      { title: 'New', url: '/products/new' },
    ]}
  ]
</script>

<TopBar.Root>
  {#each items as item}
    <TopBar.Item {item} />
  {/each}
</TopBar.Root>

Exports

Export	Description
TopBar.Root	Container component
TopBar.Item	Desktop nav item
TopBar.MobileItem	Mobile nav item
isBasicMenuItem	Type guard for items with url