Sidebar

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Sidebar, SidebarProvider, SidebarHeader, SidebarContent, SidebarFooter } from "@line/abc-def-react/sidebar";

<script setup lang="ts">
import { Sidebar, SidebarProvider, SidebarHeader, SidebarContent, SidebarFooter } from "@line/abc-def-vue/sidebar";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
} from "@line/abc-def-react/sidebar";

export function Example() {
  return (
    <SidebarProvider defaultOpen>
      <Sidebar>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Docs</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                <SidebarMenuItem><SidebarMenuButton>Components</SidebarMenuButton></SidebarMenuItem>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
    </SidebarProvider>
  );
}

<script setup lang="ts">
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
} from "@line/abc-def-vue/sidebar";
</script>

<template>
  <SidebarProvider default-open>
    <Sidebar>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Docs</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton>Components</SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  </SidebarProvider>
</template>

Component tokens

Composition exports

Usage notes

• Use for app navigation, not document footnotes.
• Keep primary destinations scannable.
• Related component tokens use the `sidebar` token group in `@line/abc-def-styles/css`.