SidebarIconExample() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ SidebarIconExample() — ui Function Reference

Dependency Diagram

graph TD
  7c81ef45_f2ec_c57e_6653_e162eb6a6c32["SidebarIconExample()"]
  bf998e52_b9c1_9c9c_c5a9_e2ff3ef22236["sidebar-icon-example.tsx"]
  7c81ef45_f2ec_c57e_6653_e162eb6a6c32 -->|defined in| bf998e52_b9c1_9c9c_c5a9_e2ff3ef22236
  style 7c81ef45_f2ec_c57e_6653_e162eb6a6c32 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/sidebar-icon-example.tsx lines 53–461

export default function SidebarIconExample() {
  const data = {
    user: {
      name: "shadcn",
      email: "m@example.com",
      avatar: "/avatars/shadcn.jpg",
    },
    teams: [
      {
        name: "Acme Inc",
        plan: "Enterprise",
      },
      {
        name: "Acme Corp.",
        plan: "Startup",
      },
      {
        name: "Evil Corp.",
        plan: "Free",
      },
    ],
    navMain: [
      {
        title: "Playground",
        url: "#",
        icon: (
          <IconPlaceholder
            lucide="TerminalSquareIcon"
            tabler="IconTerminal2"
            hugeicons="ComputerTerminalIcon"
            phosphor="TerminalIcon"
            remixicon="RiTerminalBoxLine"
          />
        ),
        isActive: true,
        items: [
          {
            title: "History",
            url: "#",
          },
          {
            title: "Starred",
            url: "#",
          },
          {
            title: "Settings",
            url: "#",
          },
        ],
      },
      {
        title: "Models",
        url: "#",
        icon: (
          <IconPlaceholder
            lucide="BotIcon"
            tabler="IconRobot"
            hugeicons="RoboticIcon"
            phosphor="RobotIcon"
            remixicon="RiRobotLine"
          />
        ),
        items: [
          {
            title: "Genesis",
            url: "#",
          },
          {
            title: "Explorer",
            url: "#",
          },
          {
            title: "Quantum",
            url: "#",
          },
        ],
      },
      {
        title: "Documentation",
        url: "#",
        icon: (