SidebarInsetExample() — ui Function Reference

Architecture documentation for the SidebarInsetExample() function in sidebar-inset-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ SidebarInsetExample() — ui Function Reference

Dependency Diagram

graph TD
  84a70088_736b_ed1d_a686_a0f9ed3af9ce["SidebarInsetExample()"]
  2f934cad_203b_15e0_154a_7f484f9afcc9["sidebar-inset-example.tsx"]
  84a70088_736b_ed1d_a686_a0f9ed3af9ce -->|defined in| 2f934cad_203b_15e0_154a_7f484f9afcc9
  style 84a70088_736b_ed1d_a686_a0f9ed3af9ce fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/sidebar-inset-example.tsx lines 30–287

export default function SidebarInsetExample() {
  const data = {
    navMain: [
      {
        title: "Dashboard",
        url: "#",
        icon: (
          <IconPlaceholder
            lucide="HomeIcon"
            tabler="IconHome"
            hugeicons="Home01Icon"
            phosphor="HouseIcon"
            remixicon="RiHomeLine"
          />
        ),
        isActive: true,
        items: [
          {
            title: "Overview",
            url: "#",
          },
          {
            title: "Analytics",
            url: "#",
          },
        ],
      },
      {
        title: "Analytics",
        url: "#",
        icon: (
          <IconPlaceholder
            lucide="ChartLineIcon"
            tabler="IconChartLine"
            hugeicons="ChartIcon"
            phosphor="ChartLineIcon"
            remixicon="RiLineChartLine"
          />
        ),
        items: [
          {
            title: "Reports",
            url: "#",
          },
          {
            title: "Metrics",
            url: "#",
          },
        ],
      },
      {
        title: "Orders",
        url: "#",
        icon: (
          <IconPlaceholder
            lucide="ShoppingBagIcon"
            tabler="IconShoppingBag"
            hugeicons="ShoppingBag01Icon"
            phosphor="BagIcon"
            remixicon="RiShoppingBagLine"
          />
        ),
        items: [
          {
            title: "All Orders",
            url: "#",
          },
          {
            title: "Pending",
            url: "#",
          },
          {
            title: "Completed",
            url: "#",
          },
        ],
      },
      {
        title: "Products",
        url: "#",
        icon: (