2d:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2e:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2f:T8287,"use client"; import { AnimatePresence, LayoutGroup, MotionConfig, animate, motion, useMotionValue } from "motion/react"; import { ChevronRight, PanelLeft, Search } from "lucide-react"; import { DropdownMenu as DropdownPrimitive, Tooltip as TooltipPrimitive } from "radix-ui"; import { createContext, useCallback, useContext, useEffect, useId, useRef, useLayoutEffect, useState, type ComponentProps, type CSSProperties, type PointerEvent, type ReactNode, type RefObject, } from "react"; import { cn } from "@/lib/utils"; const SPRINGS = { smooth: { type: "spring", bounce: 0, duration: 0.4 }, bouncy: { type: "spring", bounce: 0.3, duration: 0.6 }, } as const; const GLIDE = { type: "spring", bounce: 0.15, duration: 0.3 } as const; const ICON_WIDTH = 48; type Variant = "sidebar" | "floating" | "inset"; type Spring = keyof typeof SPRINGS; type Provider = { open: boolean; setOpen: (open: boolean) => void; toggle: () => void; mobile: boolean; mobileOpen: boolean; setMobileOpen: (open: boolean) => void; spring: Spring; variant: Variant; setVariant: (v: Variant) => void; /** True when the sidebar paints itself dark on a light page, from the tone prop or --ui-sidebar-scheme. */ dark: boolean; setTone: (tone: Tone | undefined) => void; }; type Tone = "dark"; type Panel = { collapsed: boolean; variant: Variant; uid: string; hovered: string | null; setHovered: (id: string | null) => void }; const ProviderContext = createContext(null); const PanelContext = createContext({ collapsed: false, variant: "sidebar", uid: "", hovered: null, setHovered: () => {} }); export function useSidebar() { const ctx = useContext(ProviderContext); if (!ctx) throw new Error("useSidebar must be used inside ."); return ctx; } const PAGE = "bg-[var(--ui-surface,#fafafa)] dark:bg-[var(--ui-surface,#0a0a0a)]"; const PANEL = "bg-[var(--ui-sidebar-bg,var(--ui-surface,#fafafa))] dark:bg-[var(--ui-sidebar-bg,var(--ui-surface,#0a0a0a))]"; const PANEL_DARK = "bg-[var(--ui-sidebar-bg,#0a0a0a)]"; const shell = (variant: Variant, dark: boolean) => variant !== "inset" ? PAGE : dark ? PANEL_DARK : "bg-[var(--ui-sidebar-bg,var(--ui-surface,#f5f5f5))] dark:bg-[var(--ui-sidebar-bg,var(--ui-surface,#0a0a0a))]"; function useSchemeVar(ref: RefObject) { const [dark, setDark] = useState(false); useLayoutEffect(() => { const read = () => ref.current && setDark(getComputedStyle(ref.current).getPropertyValue("--ui-sidebar-scheme").trim() === "dark"); read(); const observer = new MutationObserver(read); observer.observe(document.head, { childList: true, subtree: true, characterData: true }); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style"] }); return () => observer.disconnect(); }, [ref]); return dark; } export interface SidebarProviderProps extends ComponentProps<"div"> { defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; /** smooth: settles without overshoot · bouncy: a little spring on open, close and every sliding highlight. */ spring?: Spring; /** ⌘/Ctrl + this key toggles the sidebar; false turns it off. */ shortcut?: string | false; /** Below this container width the sidebar becomes a drawer. */ breakpoint?: number; } /** * Holds the sidebar's open state and lays the sidebar and the page out side by side. * Theme it with CSS variables on any parent (set them under .dark too): --ui-accent, --ui-active-bg, * --ui-active-fg, --ui-icon, --ui-icon-stroke, --ui-surface, --ui-radius, --ui-row (row height), * --ui-sidebar-bg, and --ui-sidebar-scheme: dark for a dark sidebar on a light page. */ export function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, spring = "smooth", shortcut = "b", breakpoint = 640, className, style, children, ...props }: SidebarProviderProps) { const [inner, setInner] = useState(defaultOpen); const [mobile, setMobile] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); const [variant, setVariant] = useState("sidebar"); const [tone, setTone] = useState(); const ref = useRef(null); const schemeVar = useSchemeVar(ref); const dark = tone === "dark" || schemeVar; const open = openProp ?? inner; const setOpen = useCallback( (next: boolean) => { if (openProp === undefined) setInner(next); onOpenChange?.(next); }, [openProp, onOpenChange], ); const toggle = useCallback(() => (mobile ? setMobileOpen((o) => !o) : setOpen(!open)), [mobile, open, setOpen]); useEffect(() => { const el = ref.current; if (!el) return; const observer = new ResizeObserver(() => setMobile(el.offsetWidth < breakpoint)); observer.observe(el); return () => observer.disconnect(); }, [breakpoint]); useEffect(() => { if (!mobile) setMobileOpen(false); }, [mobile]); useEffect(() => { if (!shortcut) return; const key = (e: KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcut) { e.preventDefault(); toggle(); } }; window.addEventListener("keydown", key); return () => window.removeEventListener("keydown", key); }, [shortcut, toggle]); return (

{children}

); } const FLOATING = "rounded-[16px] shadow-[0_1px_2px_rgb(0_0_0/0.04),0_8px_24px_-12px_rgb(0_0_0/0.12)] ring-1 ring-black/[0.06] dark:shadow-none dark:ring-white/[0.08]"; const surface = (variant: Variant, dark: boolean) => variant !== "floating" ? "" : cn(FLOATING, dark ? "bg-[var(--ui-sidebar-bg,#171717)]" : "bg-[var(--ui-sidebar-bg,#fff)] dark:bg-[var(--ui-sidebar-bg,#171717)]"); export interface SidebarProps extends ComponentProps<"aside"> { /** sidebar: flush with a hairline edge · floating: a raised card · inset: blends into the shell while the page sits in a card. */ variant?: Variant; /** icon: shrinks to an icon rail with tooltips · offcanvas: slides away · none: always open. */ collapsible?: "icon" | "offcanvas" | "none"; side?: "left" | "right"; width?: number; /** dark: a dark sidebar on a light page; everything inside it uses its dark: styles. Also set by --ui-sidebar-scheme: dark. */ tone?: Tone; } export function Sidebar({ variant = "sidebar", collapsible = "icon", side = "left", width = 256, tone, className, children, ...props }: SidebarProps) { const ctx = useSidebar(); const uid = useId(); const [hovered, setHovered] = useState(null); const { setVariant, setTone } = ctx; useEffect(() => setVariant(variant), [variant, setVariant]); useEffect(() => setTone(tone), [tone, setTone]); const transition = SPRINGS[ctx.spring]; const open = collapsible === "none" || ctx.open; const collapsed = !ctx.mobile && !open && collapsible === "icon"; const pad = variant === "floating" ? 16 : 0; const target = open ? width + pad : collapsible === "icon" ? ICON_WIDTH + pad : 0; const left = side === "left"; const body = (mobile: boolean) => (

setHovered(null)} className={cn("flex h-full w-full flex-col overflow-hidden", !mobile && surface(variant, ctx.dark), className)} > {children}

); if (ctx.mobile) return {body(true)}; return ( )} > {body(false)} ); } function MobileSidebar({ side, width, variant, children, ...props }: ComponentProps<"aside"> & { side: "left" | "right"; width: number; variant: Variant }) { const ctx = useSidebar(); const x = useMotionValue(0); const panel = useRef(null); const start = useRef<{ x: number; y: number; t: number; dragging: boolean } | null>(null); const restore = useRef(null); const left = side === "left"; const { mobileOpen, setMobileOpen } = ctx; useEffect(() => { if (!mobileOpen) return; restore.current = document.activeElement as HTMLElement | null; x.jump(0); requestAnimationFrame(() => panel.current?.querySelector("button, a, [tabindex='0']")?.focus()); const key = (e: KeyboardEvent) => e.key === "Escape" && setMobileOpen(false); window.addEventListener("keydown", key); return () => { window.removeEventListener("keydown", key); restore.current?.focus?.(); }; }, [mobileOpen, setMobileOpen, x]); const down = (e: PointerEvent) => (start.current = { x: e.clientX, y: e.clientY, t: performance.now(), dragging: false }); const move = (e: PointerEvent) => { const s = start.current; if (!s) return; const dx = e.clientX - s.x; if (!s.dragging) { if (Math.abs(dx) < 8 || Math.abs(dx) < Math.abs(e.clientY - s.y)) return; s.dragging = true; e.currentTarget.setPointerCapture(e.pointerId); } x.set(left ? Math.min(0, dx) : Math.max(0, dx)); }; const up = (e: PointerEvent) => { const s = start.current; start.current = null; if (!s?.dragging) return; const dx = e.clientX - s.x; const speed = Math.abs(dx) / Math.max(1, performance.now() - s.t); if ((left ? -dx : dx) > 80 || speed > 0.6) setMobileOpen(false); else animate(x, 0, SPRINGS[ctx.spring]); }; const floating = variant === "floating"; return ( {mobileOpen && ( <> setMobileOpen(false)} /> )} ); } export function SidebarHeader({ className, ...props }: ComponentProps<"div">) { return

; } export function SidebarContent({ className, ...props }: ComponentProps<"div">) { return (

); } export function SidebarFooter({ className, ...props }: ComponentProps<"div">) { return

; } export function SidebarSeparator({ className, ...props }: ComponentProps<"div">) { return

; } export interface SidebarGroupProps extends Omit, "title"> { label?: ReactNode; /** A small button on the right of the label, e.g. to add a project. */ action?: ReactNode; /** Click the label to hide and show the group. */ collapsible?: boolean; defaultOpen?: boolean; } export function SidebarGroup({ label, action, collapsible, defaultOpen = true, className, children, ...props }: SidebarGroupProps) { const { collapsed } = useContext(PanelContext); const [open, setOpen] = useState(defaultOpen); const shown = !collapsible || open || collapsed; const labelClass = "flex h-7 min-w-0 flex-1 items-center gap-1 whitespace-nowrap px-2 text-[12px] font-medium text-neutral-400 dark:text-neutral-500"; return (

{label && ( {collapsible ? ( ) : ( {label} )} {action && !collapsed && {action}} )} {shown && ( {children} )}

); } const ACTIVE: Record = { sidebar: "bg-[var(--ui-active-bg,color-mix(in_oklab,var(--ui-accent,#0a0a0a)_7.5%,transparent))] dark:bg-[var(--ui-active-bg,color-mix(in_oklab,var(--ui-accent,#fff)_10%,transparent))]", floating: "bg-[var(--ui-active-bg,color-mix(in_oklab,var(--ui-accent,#0a0a0a)_6.5%,transparent))] dark:bg-[var(--ui-active-bg,color-mix(in_oklab,var(--ui-accent,#fff)_10%,transparent))]", inset: "bg-[var(--ui-active-bg,#fff)] shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.06] dark:bg-[var(--ui-active-bg,rgb(255_255_255/0.09))] dark:shadow-none dark:ring-white/[0.06]", }; const ACTIVE_TEXT = "font-medium text-[var(--ui-active-fg,var(--ui-accent,#0a0a0a))] dark:text-[var(--ui-active-fg,var(--ui-accent,#fff))]"; export interface SidebarButtonProps extends Omit, "ref"> { icon?: ReactNode; active?: boolean; /** A string shows as a small chip (New, Beta); a number as a count. */ badge?: ReactNode; /** A shortcut shown while the row is hovered. */ kbd?: string; /** Shown beside the icon while the sidebar is collapsed; defaults to the text. */ tooltip?: string; /** lg: a taller row for a workspace or account with a second line. */ size?: "md" | "lg"; /** Render a link instead of a button. */ href?: string; ref?: ComponentProps<"button">["ref"]; } /** One clickable row: icon, text, badge. Use SidebarItem inside a group; use this directly as a dropdown trigger. */ export function SidebarButton({ icon, active, badge, kbd, tooltip, size = "md", href, className, children, onClick, onPointerEnter, ref, ...props }: SidebarButtonProps) { const { collapsed, variant, uid, hovered, setHovered } = useContext(PanelContext); const provider = useContext(ProviderContext); const id = useId(); const tip = tooltip ?? (typeof children === "string" ? children : undefined); const inset = collapsed && size === "lg" && "inset-y-1.5"; const classes = cn( "group/item relative flex w-full shrink-0 items-center gap-2.5 rounded-[var(--ui-radius,9px)] px-2 text-left outline-none transition-[color,transform] duration-150 active:scale-[0.985]", size === "lg" ? cn("h-11 transition-[color,transform,padding]", collapsed ? "px-0" : "px-1.5") : "h-[var(--ui-row,32px)]", "text-[13.5px]", active ? ACTIVE_TEXT : "text-neutral-600 hover:text-neutral-950 dark:text-neutral-400 dark:hover:text-white", "focus-visible:bg-neutral-950/[0.05] dark:focus-visible:bg-white/[0.07]", className, ); const inner = ( <> {active && } {hovered === id && !active && ( )} {icon && ( {icon} )} {typeof children === "string" ? {children} : {children}} {kbd && {kbd}} {badge !== undefined && (typeof badge === "number" ? ( {badge} ) : typeof badge === "string" ? ( {badge} ) : ( badge ))} {collapsed && typeof badge === "number" && badge > 0 && } ); const shared = { "data-active": active || undefined, "aria-current": active ? ("page" as const) : undefined, onPointerEnter: (e: PointerEvent) => { setHovered(id); onPointerEnter?.(e as PointerEvent); }, className: classes, }; const close = () => provider?.mobile && provider.setMobileOpen(false); const element = href ? ( ["ref"]} {...shared} onClick={(e) => (onClick?.(e as never), close())} {...(props as ComponentProps<"a">)}> {inner} ) : ( ); if (!collapsed || !tip) return element; return ( {element} {tip} {kbd && {kbd}} ); } export function SidebarItem(props: SidebarButtonProps) { return (

); } export interface SidebarSubmenuProps extends Omit { label: ReactNode; defaultOpen?: boolean; children: ReactNode; } /** A row that opens a nested list of SidebarSubItem. */ export function SidebarSubmenu({ label, defaultOpen = false, children, onClick, ...props }: SidebarSubmenuProps) { const { collapsed } = useContext(PanelContext); const provider = useContext(ProviderContext); const [open, setOpen] = useState(defaultOpen); return (

{ onClick?.(e); if (collapsed) { provider?.setOpen(true); setOpen(true); } else setOpen(!open); }} {...props} > {label} {open && !collapsed && ( {children} )}

); } export function SidebarSubItem({ className, ...props }: SidebarButtonProps) { return (

); } export function SidebarSearch({ placeholder = "Search", kbd = "⌘K", className, ...props }: ComponentProps<"button"> & { placeholder?: string; kbd?: string }) { const { collapsed } = useContext(PanelContext); if (collapsed) return } tooltip={placeholder} kbd={kbd} {...props} />; return ( ); } /** A small card for an invite, an upgrade or an announcement; hidden while the sidebar is collapsed. */ export function SidebarCard({ className, ...props }: ComponentProps<"div">) { const { collapsed } = useContext(PanelContext); return ( {!collapsed && (

)} ); } export function SidebarTrigger({ className, children, onClick, ...props }: ComponentProps<"button">) { const { toggle, open, mobile, mobileOpen } = useSidebar(); const expanded = mobile ? mobileOpen : open; return ( ); } /** A thin strip on the sidebar's edge: hover shows a line, click toggles. */ export function SidebarRail({ className, ...props }: ComponentProps<"button">) { const { toggle, open, mobile } = useSidebar(); if (mobile) return null; return (

What would you like to create?

Create a product ad with voiceover… Beta

{actions.map(({ name, icon: Icon }) => ( ))}

Recent

{[ ["Spring launch voiceover", "Speech · 2m ago"], ["Onboarding agent", "Agent · 1h ago"], ].map(([title, meta]) => (

{title} {meta}

))}

); } 32:T18819,

"use client";

import {
  ArrowUp,
  AudioLines,
  Bell,
  Bot,
  BookOpen,
  ChartNoAxesColumn,
  Check,
  ChevronsUpDown,
  Clapperboard,
  FileText,
  Home,
  ImageIcon,
  Inbox,
  LogOut,
  Mic,
  Plus,
  Send,
  Settings,
  UserPlus,
  Workflow,
} from "lucide-react";
import { useState } from "react";
import {
  Sidebar,
  SidebarButton,
  SidebarCard,
  SidebarContent,
  SidebarDropdown,
  SidebarDropdownContent,
  SidebarDropdownItem,
  SidebarDropdownLabel,
  SidebarDropdownSeparator,
  SidebarDropdownTrigger,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarInset,
  SidebarItem,
  SidebarProvider,
  SidebarRail,
  SidebarSearch,
  SidebarSubItem,
  SidebarSubmenu,
  SidebarTrigger,
} from "@/components/scalar-ui/sidebar";

function HalcyonMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
      <path d="M6.5 13.5a5.5 5.5 0 0 1 11 0" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
      <path d="M4.5 17.5h15M8.5 21h7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
    </svg>
  );
}

function NorthwindMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
      <path d="M6 18V6l12 12V6" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function LumenMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} aria-hidden>
      <path d="M12 4a8 8 0 1 0 8 8h-8z" fill="currentColor" />
    </svg>
  );
}

const workspaces = [
  { name: "Halcyon", plan: "Pro · 8 members", Mark: HalcyonMark, tile: "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950" },
  { name: "Northwind", plan: "Team · 24 members", Mark: NorthwindMark, tile: "bg-emerald-600 text-white" },
  { name: "Lumen Labs", plan: "Free · 2 members", Mark: LumenMark, tile: "bg-gradient-to-br from-orange-400 to-rose-500 text-white" },
];

const main = [
  { name: "Home", icon: <Home />, kbd: "G H" },
  { name: "Inbox", icon: <Inbox />, badge: 4, kbd: "G I" },
  { name: "Agents", icon: <Bot />, badge: "New" },
  { name: "Flows", icon: <Workflow /> },
  { name: "Analytics", icon: <ChartNoAxesColumn /> },
];

const pinned = [
  { name: "Text to Speech", icon: <AudioLines /> },
  { name: "Voice Notes", icon: <Mic /> },
  { name: "Image & Video", icon: <ImageIcon /> },
];

const actions = [
  { name: "Speech", icon: AudioLines },
  { name: "Image", icon: ImageIcon },
  { name: "Video", icon: Clapperboard },
  { name: "Agent", icon: Bot },
  { name: "Doc", icon: FileText },
];

const avatar = "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&fit=crop&crop=faces&auto=format&q=75";

const quiet =
  "flex h-8 items-center gap-1.5 rounded-[9px] px-2.5 text-[13px] font-medium text-neutral-700 outline-none ring-1 ring-black/[0.07] transition-colors hover:bg-neutral-50 focus-visible:bg-neutral-100 dark:text-neutral-300 dark:ring-white/[0.1] dark:hover:bg-white/[0.06]";

export default function Demo() {
  const [active, setActive] = useState("Home");
  const [workspace, setWorkspace] = useState(workspaces[0]);
  return (
    <div className="h-[580px] w-full overflow-hidden rounded-[18px] shadow-[0_1px_2px_rgb(0_0_0/0.04),0_16px_40px_-16px_rgb(0_0_0/0.16)] ring-1 ring-black/[0.08] dark:shadow-none dark:ring-white/[0.1]">
      <SidebarProvider>
        <Sidebar width={244}>
          <SidebarHeader>
            <SidebarDropdown>
              <SidebarDropdownTrigger asChild>
                <SidebarButton
                  size="lg"
                  tooltip={workspace.name}
                  icon={
                    <span className={`flex size-7 items-center justify-center rounded-[8px] shadow-[inset_0_1px_0_rgb(255_255_255/0.18)] ${workspace.tile}`}>
                      <workspace.Mark className="size-4" />
                    </span>
                  }
                >
                  <span className="flex flex-col leading-tight">
                    <span className="truncate text-[13.5px] font-semibold text-neutral-950 dark:text-white">{workspace.name}</span>
                    <span className="truncate text-[11.5px] font-normal text-neutral-500">{workspace.plan}</span>
                  </span>
                  <ChevronsUpDown className="ml-auto size-3.5 shrink-0 text-neutral-400" />
                </SidebarButton>
              </SidebarDropdownTrigger>
              <SidebarDropdownContent>
                <SidebarDropdownLabel>Workspaces</SidebarDropdownLabel>
                {workspaces.map((w) => (
                  <SidebarDropdownItem key={w.name} onSelect={() => setWorkspace(w)}>
                    <span className={`flex size-5 items-center justify-center rounded-[6px] ${w.tile}`}>
                      <w.Mark className="size-3! text-current!" />
                    </span>
                    <span className="flex-1">{w.name}</span>
                    {w.name === workspace.name && <Check className="text-neutral-900! dark:text-white!" />}
                  </SidebarDropdownItem>
                ))}
                <SidebarDropdownSeparator />
                <SidebarDropdownItem>
                  <Plus />
                  New workspace
                </SidebarDropdownItem>
              </SidebarDropdownContent>
            </SidebarDropdown>
            <SidebarSearch placeholder="Search everything" />
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup>
              {main.map((item) => (
                <SidebarItem key={item.name} icon={item.icon} badge={item.badge} kbd={item.kbd} active={active === item.name} onClick={() => setActive(item.name)}>
                  {item.name}
                </SidebarItem>
              ))}
            </SidebarGroup>
            <SidebarGroup label="Pinned" collapsible>
              {pinned.map((item) => (
                <SidebarItem key={item.name} icon={item.icon} active={active === item.name} onClick={() => setActive(item.name)}>
                  {item.name}
                </SidebarItem>
              ))}
              <SidebarSubmenu icon={<BookOpen />} label="Playbooks" defaultOpen>
                {["Launch week", "Support macros", "Brand voice"].map((name) => (
                  <SidebarSubItem key={name} active={active === name} onClick={() => setActive(name)}>
                    {name}
                  </SidebarSubItem>
                ))}
              </SidebarSubmenu>
            </SidebarGroup>
          </SidebarContent>
          <SidebarFooter>
            <SidebarCard>
              <span className="mb-2 flex size-7 items-center justify-center rounded-[8px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.07] dark:bg-neutral-800 dark:ring-white/[0.1]">
                <Send className="size-3.5 text-neutral-700 dark:text-neutral-300" />
              </span>
              <p className="font-medium text-neutral-900 dark:text-white">Invite your team</p>
              <p className="mt-0.5 text-[12px] leading-snug text-neutral-500">Share voices, flows and agents in one place.</p>
            </SidebarCard>
            <SidebarDropdown>
              <SidebarDropdownTrigger asChild>
                <SidebarButton size="lg" tooltip="Maya Chen" icon={<img src={avatar} alt="" className="size-7 rounded-full object-cover" />}>
                  <span className="flex flex-col leading-tight">
                    <span className="truncate text-[13px] font-medium text-neutral-900 dark:text-white">Maya Chen</span>
                    <span className="truncate text-[11.5px] font-normal text-neutral-500">maya@halcyon.so</span>
                  </span>
                  <ChevronsUpDown className="ml-auto size-3.5 shrink-0 text-neutral-400" />
                </SidebarButton>
              </SidebarDropdownTrigger>
              <SidebarDropdownContent side="top">
                <SidebarDropdownItem>
                  <Settings />
                  Settings
                </SidebarDropdownItem>
                <SidebarDropdownItem>
                  <UserPlus />
                  Invite people
                </SidebarDropdownItem>
                <SidebarDropdownSeparator />
                <SidebarDropdownItem>
                  <LogOut />
                  Log out
                </SidebarDropdownItem>
              </SidebarDropdownContent>
            </SidebarDropdown>
          </SidebarFooter>
          <SidebarRail />
        </Sidebar>
        <SidebarInset>
          <header className="flex h-12 shrink-0 items-center gap-2 border-b border-black/[0.06] px-3 dark:border-white/[0.07]">
            <SidebarTrigger />
            <span className="h-4 w-px bg-black/[0.08] dark:bg-white/[0.1]" />
            <span className="truncate text-[13.5px] font-medium text-neutral-900 dark:text-white">{active}</span>
            <div className="ml-auto flex items-center gap-1.5">
              <button className={`${quiet} hidden @[480px]:flex`}>Feedback</button>
              <button className={quiet}>Docs</button>
              <button aria-label="Notifications" className="relative flex size-8 items-center justify-center rounded-[9px] text-neutral-500 outline-none transition-colors hover:bg-neutral-950/[0.05] hover:text-neutral-900 dark:hover:bg-white/[0.08] dark:hover:text-white">
                <Bell className="size-4" />
                <span className="absolute right-2 top-2 size-1.5 rounded-full bg-orange-500 ring-2 ring-white dark:ring-neutral-900" />
              </button>
            </div>
          </header>
          <div className="@container flex-1 overflow-y-auto">
            <div className="mx-auto flex max-w-[520px] flex-col items-center px-5 pb-8 pt-14">
              <h1 className="text-center text-[22px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">What would you like to create?</h1>
              <div className="mt-5 flex h-12 w-full items-center gap-2 rounded-full bg-white pl-2 pr-1.5 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_6px_20px_-10px_rgb(0_0_0/0.15)] ring-1 ring-black/[0.07] dark:bg-neutral-800 dark:ring-white/[0.1]">
                <span className="size-7 shrink-0 rounded-full bg-[radial-gradient(circle_at_30%_30%,#fed7aa,#f97316_55%,#9a3412)]" />
                <Plus className="size-4 shrink-0 text-neutral-400" />
                <span className="flex-1 truncate text-[13.5px] text-neutral-400">Create a product ad with voiceover…</span>
                <span className="hidden rounded-[6px] bg-neutral-950/[0.05] px-1.5 py-0.5 text-[11px] font-medium text-neutral-500 @[420px]:block dark:bg-white/[0.08]">Beta</span>
                <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-neutral-950 text-white dark:bg-white dark:text-neutral-950">
                  <ArrowUp className="size-4" />
                </span>
              </div>
              <div className="mt-8 grid w-full grid-cols-5 gap-2">
                {actions.map(({ name, icon: Icon }) => (
                  <button key={name} className="group flex flex-col items-center gap-2 rounded-[12px] py-2 outline-none focus-visible:bg-neutral-950/[0.04]">
                    <span className="flex size-10 items-center justify-center rounded-[11px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.07] transition-transform duration-200 group-hover:-translate-y-0.5 dark:bg-neutral-800 dark:ring-white/[0.1]">
                      <Icon className="size-4 text-neutral-700 dark:text-neutral-300" />
                    </span>
                    <span className="text-[12px] font-medium text-neutral-700 dark:text-neutral-300">{name}</span>
                  </button>
                ))}
              </div>
              <div className="mt-6 w-full rounded-[16px] bg-neutral-50 p-1 ring-1 ring-black/[0.05] dark:bg-white/[0.03] dark:ring-white/[0.06]">
                <p className="px-3 pb-1.5 pt-2 text-[12px] font-medium text-neutral-500">Recent</p>
                {[
                  ["Spring launch voiceover", "Speech · 2m ago"],
                  ["Onboarding agent", "Agent · 1h ago"],
                ].map(([title, meta]) => (
                  <div key={title} className="flex items-center gap-3 rounded-[12px] bg-white px-3 py-2.5 ring-1 ring-black/[0.04] [&+&]:mt-1 dark:bg-neutral-900 dark:ring-white/[0.06]">
                    <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-neutral-900 dark:text-white">{title}</span>
                    <span className="shrink-0 text-[12px] text-neutral-400">{meta}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </SidebarInset>
      </SidebarProvider>
    </div>
  );
}

33:T2147,"use client"; import { motion } from "motion/react"; import { ChevronsUpDown, CircleDot, Inbox, Layers, LogOut, Map as MapIcon, PenSquare, Settings, SquareStack, User } from "lucide-react"; import { useState } from "react"; import { Sidebar, SidebarButton, SidebarContent, SidebarDropdown, SidebarDropdownContent, SidebarDropdownItem, SidebarDropdownLabel, SidebarDropdownSeparator, SidebarDropdownTrigger, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, SidebarRail, SidebarTrigger, } from "@/components/scalar-ui/sidebar"; import { cn } from "@/lib/utils"; const face = (id: string) => `https://images.unsplash.com/photo-${id}?w=64&h=64&fit=crop&crop=faces&auto=format&q=75`; const teams = [ { name: "Design", dot: "bg-pink-400" }, { name: "Platform", dot: "bg-sky-400" }, { name: "Growth", dot: "bg-lime-400" }, ]; const months = ["Oct", "Nov", "Dec", "Jan"]; const roadmap = [ { name: "Offline mode", team: "Platform", start: 0, span: 2.2, progress: 70, bar: "bg-sky-500", lead: "1506794778202-cad84cf45f1d" }, { name: "New onboarding", team: "Growth", start: 0.6, span: 1.6, progress: 45, bar: "bg-lime-500", lead: "1580489944761-15a19d654956" }, { name: "Icon refresh", team: "Design", start: 1.1, span: 1.2, progress: 20, bar: "bg-pink-500", lead: "1544005313-94ddf0286df2" }, { name: "Billing v2", team: "Platform", start: 1.8, span: 2, progress: 5, bar: "bg-sky-500", lead: "1472099645785-5658abf4ff4e" }, { name: "Referral program", team: "Growth", start: 2.6, span: 1.3, progress: 0, bar: "bg-lime-500", lead: "1534528741775-53994a69daeb" }, ]; export default function Example() { const [page, setPage] = useState("Roadmap"); const [team, setTeam] = useState(null); const rows = roadmap.filter((r) => !team || r.team === team); return (

Meridian

} className="bg-white/[0.06] shadow-[inset_0_0_0_1px_rgb(255_255_255/0.06)]" kbd="C"> New issue } badge={4} active={page === "Inbox"} onClick={() => setPage("Inbox")}> Inbox } active={page === "My issues"} onClick={() => setPage("My issues")}> My issues } active={page === "Roadmap"} onClick={() => (setPage("Roadmap"), setTeam(null))}> Roadmap } active={page === "Projects"} onClick={() => setPage("Projects")}> Projects } active={page === "Views"} onClick={() => setPage("Views")}> Views {teams.map((t) => ( } active={page === "Roadmap" && team === t.name} onClick={() => (setPage("Roadmap"), setTeam(t.name))} > {t.name} ))} }> Hana Sato Meridian · Pro hana@meridian.app Profile Settings Log out

{page} {team && {team}}

{months.map((m) => ( {m} ))}

{rows.map((r, i) => (

{r.name}

{months.map((m) => ( ))}

{r.progress}%

))}

); } 34:T136ff,

"use client";

import { motion } from "motion/react";
import { ChevronsUpDown, CircleDot, Inbox, Layers, LogOut, Map as MapIcon, PenSquare, Settings, SquareStack, User } from "lucide-react";
import { useState } from "react";
import {
  Sidebar,
  SidebarButton,
  SidebarContent,
  SidebarDropdown,
  SidebarDropdownContent,
  SidebarDropdownItem,
  SidebarDropdownLabel,
  SidebarDropdownSeparator,
  SidebarDropdownTrigger,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarInset,
  SidebarItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/scalar-ui/sidebar";
import { cn } from "@/lib/utils";

const face = (id: string) => `https://images.unsplash.com/photo-${id}?w=64&h=64&fit=crop&crop=faces&auto=format&q=75`;

const teams = [
  { name: "Design", dot: "bg-pink-400" },
  { name: "Platform", dot: "bg-sky-400" },
  { name: "Growth", dot: "bg-lime-400" },
];

const months = ["Oct", "Nov", "Dec", "Jan"];

const roadmap = [
  { name: "Offline mode", team: "Platform", start: 0, span: 2.2, progress: 70, bar: "bg-sky-500", lead: "1506794778202-cad84cf45f1d" },
  { name: "New onboarding", team: "Growth", start: 0.6, span: 1.6, progress: 45, bar: "bg-lime-500", lead: "1580489944761-15a19d654956" },
  { name: "Icon refresh", team: "Design", start: 1.1, span: 1.2, progress: 20, bar: "bg-pink-500", lead: "1544005313-94ddf0286df2" },
  { name: "Billing v2", team: "Platform", start: 1.8, span: 2, progress: 5, bar: "bg-sky-500", lead: "1472099645785-5658abf4ff4e" },
  { name: "Referral program", team: "Growth", start: 2.6, span: 1.3, progress: 0, bar: "bg-lime-500", lead: "1534528741775-53994a69daeb" },
];

export default function Example() {
  const [page, setPage] = useState("Roadmap");
  const [team, setTeam] = useState<string | null>(null);
  const rows = roadmap.filter((r) => !team || r.team === team);
  return (
    <div className="h-[600px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <SidebarProvider>
        <Sidebar tone="dark" width={232}>
          <SidebarHeader>
            <div className="flex h-9 items-center gap-2 px-2">
              <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-violet-400 to-fuchsia-500">
                <span className="size-2 rounded-full bg-neutral-950" />
              </span>
              <span className="truncate text-[14px] font-semibold">Meridian</span>
            </div>
            <SidebarButton icon={<PenSquare />} className="bg-white/[0.06] shadow-[inset_0_0_0_1px_rgb(255_255_255/0.06)]" kbd="C">
              New issue
            </SidebarButton>
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup>
              <SidebarItem icon={<Inbox />} badge={4} active={page === "Inbox"} onClick={() => setPage("Inbox")}>
                Inbox
              </SidebarItem>
              <SidebarItem icon={<CircleDot />} active={page === "My issues"} onClick={() => setPage("My issues")}>
                My issues
              </SidebarItem>
            </SidebarGroup>
            <SidebarGroup label="Workspace">
              <SidebarItem icon={<MapIcon />} active={page === "Roadmap"} onClick={() => (setPage("Roadmap"), setTeam(null))}>
                Roadmap
              </SidebarItem>
              <SidebarItem icon={<SquareStack />} active={page === "Projects"} onClick={() => setPage("Projects")}>
                Projects
              </SidebarItem>
              <SidebarItem icon={<Layers />} active={page === "Views"} onClick={() => setPage("Views")}>
                Views
              </SidebarItem>
            </SidebarGroup>
            <SidebarGroup label="Teams" collapsible>
              {teams.map((t) => (
                <SidebarItem
                  key={t.name}
                  icon={<span className={cn("size-2 rounded-full", t.dot)} />}
                  active={page === "Roadmap" && team === t.name}
                  onClick={() => (setPage("Roadmap"), setTeam(t.name))}
                >
                  {t.name}
                </SidebarItem>
              ))}
            </SidebarGroup>
          </SidebarContent>
          <SidebarFooter>
            <SidebarDropdown>
              <SidebarDropdownTrigger asChild>
                <SidebarButton size="lg" tooltip="Hana Sato" icon={<img src={face("1544005313-94ddf0286df2")} alt="" className="size-7 rounded-full object-cover" />}>
                  <span className="flex min-w-0 flex-1 flex-col leading-tight">
                    <span className="truncate text-[13px] font-medium text-white">Hana Sato</span>
                    <span className="truncate text-[11.5px] font-normal text-neutral-500">Meridian · Pro</span>
                  </span>
                  <ChevronsUpDown className="size-3.5 shrink-0 text-neutral-500" />
                </SidebarButton>
              </SidebarDropdownTrigger>
              <SidebarDropdownContent side="top">
                <SidebarDropdownLabel>hana@meridian.app</SidebarDropdownLabel>
                <SidebarDropdownItem>
                  <User />
                  Profile
                </SidebarDropdownItem>
                <SidebarDropdownItem>
                  <Settings />
                  Settings
                </SidebarDropdownItem>
                <SidebarDropdownSeparator />
                <SidebarDropdownItem>
                  <LogOut />
                  Log out
                </SidebarDropdownItem>
              </SidebarDropdownContent>
            </SidebarDropdown>
          </SidebarFooter>
          <SidebarRail />
        </Sidebar>
        <SidebarInset>
          <header className="flex h-12 shrink-0 items-center gap-2 border-b border-black/[0.06] px-3 dark:border-white/[0.07]">
            <SidebarTrigger />
            <span className="text-[13.5px] font-medium text-neutral-950 dark:text-white">{page}</span>
            {team && <span className="rounded-full bg-neutral-950/[0.05] px-2 py-0.5 text-[12px] text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300">{team}</span>}
          </header>
          <div className="flex-1 overflow-auto p-4">
            <div className="min-w-[520px]">
              <div className="grid grid-cols-[160px_1fr] text-[11.5px] text-neutral-400">
                <span />
                <div className="grid grid-cols-4">
                  {months.map((m) => (
                    <span key={m} className="border-l border-black/[0.05] px-2 pb-2 dark:border-white/[0.06]">
                      {m}
                    </span>
                  ))}
                </div>
              </div>
              {rows.map((r, i) => (
                <div key={r.name} className="grid grid-cols-[160px_1fr] items-center">
                  <div className="flex min-w-0 items-center gap-2 py-2.5 pr-3">
                    <img src={face(r.lead)} alt="" className="size-5 rounded-full object-cover" />
                    <span className="truncate text-[13px] font-medium text-neutral-900 dark:text-white">{r.name}</span>
                  </div>
                  <div className="relative h-full border-l border-black/[0.05] dark:border-white/[0.06]">
                    <div className="absolute inset-0 grid grid-cols-4">
                      {months.map((m) => (
                        <span key={m} className="border-r border-black/[0.04] dark:border-white/[0.05]" />
                      ))}
                    </div>
                    <motion.div
                      initial={{ scaleX: 0, opacity: 0 }}
                      animate={{ scaleX: 1, opacity: 1 }}
                      transition={{ type: "spring", bounce: 0.15, duration: 0.5, delay: i * 0.04 }}
                      className="absolute top-[10px] h-6 origin-left overflow-hidden rounded-[7px] bg-neutral-950/[0.05] dark:bg-white/[0.07]"
                      style={{ left: `${(r.start / 4) * 100}%`, width: `${(r.span / 4) * 100}%` }}
                    >
                      <span className={cn("absolute inset-y-0 left-0 opacity-90", r.bar)} style={{ width: `${Math.max(r.progress, 3)}%` }} />
                      <span className="relative flex h-full items-center px-2 text-[11px] font-medium text-neutral-700 dark:text-neutral-200">{r.progress}%</span>
                    </motion.div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </SidebarInset>
      </SidebarProvider>
    </div>
  );
}

35:T14d1,"use client"; import { Award, BookOpen, CircleHelp, ClipboardList, FolderOpen, GraduationCap, LayoutDashboard, PanelLeftClose, PanelLeftOpen, PlayCircle, Settings, TrendingUp, Users } from "lucide-react"; import { useState } from "react"; import { Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, SidebarSubItem, SidebarSubmenu, useSidebar, } from "@/components/scalar-ui/sidebar"; import { cn } from "@/lib/utils"; const modules = [ { name: "Foundations", lessons: [["What type is for", "6 min", true], ["Reading a typeface", "9 min", true], ["Measure and rhythm", "12 min", false]] }, { name: "Pairing", lessons: [["Contrast, not conflict", "8 min", true], ["Building a type scale", "14 min", false]] }, ] as const; function Collapse() { const { open, toggle } = useSidebar(); return ( : } onClick={toggle} tooltip="Expand sidebar" kbd="⌘B"> Collapse ); } export default function Example() { const [page, setPage] = useState("Lessons"); const item = (name: string, Icon: typeof BookOpen, badge?: number) => ( } badge={badge} active={page === name} onClick={() => setPage(name)}> {name} ); return (

setPage("Overview")} icon={ } > Type Basics Course · 214 students {item("Overview", LayoutDashboard)} {item("Lessons", BookOpen, 12)} {item("Quizzes", ClipboardList, 3)} {item("Resources", FolderOpen)} {item("Cohorts", Users)} {item("Progress", TrendingUp)} {item("Certificates", Award)} } label="Settings" defaultOpen> {["Pricing", "Access", "Emails"].map((s) => ( setPage(s)}> {s} ))} }>Help center

Type Basics

{page}

{page === "Lessons" ? (

{modules.map((m, i) => (

Module {i + 1} · {m.name}

{title} {length} {live ? "Published" : "Draft"}

))}

) : (

Open Lessons to see the course outline.

)}

); } 36:Tcb79,

"use client";

import { Award, BookOpen, CircleHelp, ClipboardList, FolderOpen, GraduationCap, LayoutDashboard, PanelLeftClose, PanelLeftOpen, PlayCircle, Settings, TrendingUp, Users } from "lucide-react";
import { useState } from "react";
import {
  Sidebar,
  SidebarButton,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarInset,
  SidebarItem,
  SidebarProvider,
  SidebarSubItem,
  SidebarSubmenu,
  useSidebar,
} from "@/components/scalar-ui/sidebar";
import { cn } from "@/lib/utils";

const modules = [
  { name: "Foundations", lessons: [["What type is for", "6 min", true], ["Reading a typeface", "9 min", true], ["Measure and rhythm", "12 min", false]] },
  { name: "Pairing", lessons: [["Contrast, not conflict", "8 min", true], ["Building a type scale", "14 min", false]] },
] as const;

function Collapse() {
  const { open, toggle } = useSidebar();
  return (
    <SidebarItem icon={open ? <PanelLeftClose /> : <PanelLeftOpen />} onClick={toggle} tooltip="Expand sidebar" kbd="⌘B">
      Collapse
    </SidebarItem>
  );
}

export default function Example() {
  const [page, setPage] = useState("Lessons");
  const item = (name: string, Icon: typeof BookOpen, badge?: number) => (
    <SidebarItem key={name} icon={<Icon />} badge={badge} active={page === name} onClick={() => setPage(name)}>
      {name}
    </SidebarItem>
  );
  return (
    <div className="h-[560px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <SidebarProvider>
        <Sidebar width={236}>
          <SidebarHeader>
            <SidebarButton
              size="lg"
              tooltip="Type Basics"
              onClick={() => setPage("Overview")}
              icon={
                <span className="flex size-8 items-center justify-center rounded-[9px] bg-amber-400 text-amber-950">
                  <GraduationCap className="size-4" />
                </span>
              }
            >
              <span className="flex min-w-0 flex-1 flex-col leading-tight">
                <span className="truncate text-[13.5px] font-semibold text-neutral-950 dark:text-white">Type Basics</span>
                <span className="truncate text-[11.5px] font-normal text-neutral-500">Course · 214 students</span>
              </span>
            </SidebarButton>
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup label="Course">
              {item("Overview", LayoutDashboard)}
              {item("Lessons", BookOpen, 12)}
              {item("Quizzes", ClipboardList, 3)}
              {item("Resources", FolderOpen)}
            </SidebarGroup>
            <SidebarGroup label="Students" collapsible defaultOpen={false}>
              {item("Cohorts", Users)}
              {item("Progress", TrendingUp)}
              {item("Certificates", Award)}
            </SidebarGroup>
            <SidebarGroup label="Manage" collapsible>
              <SidebarSubmenu icon={<Settings />} label="Settings" defaultOpen>
                {["Pricing", "Access", "Emails"].map((s) => (
                  <SidebarSubItem key={s} active={page === s} onClick={() => setPage(s)}>
                    {s}
                  </SidebarSubItem>
                ))}
              </SidebarSubmenu>
            </SidebarGroup>
          </SidebarContent>
          <SidebarFooter>
            <SidebarItem icon={<CircleHelp />}>Help center</SidebarItem>
            <Collapse />
          </SidebarFooter>
        </Sidebar>
        <SidebarInset>
          <div className="overflow-y-auto px-6 py-6">
            <p className="text-[12px] font-medium text-amber-600 dark:text-amber-400">Type Basics</p>
            <h2 className="mt-1 text-[20px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">{page}</h2>
            {page === "Lessons" ? (
              <div className="mt-5 flex flex-col gap-4">
                {modules.map((m, i) => (
                  <section key={m.name}>
                    <p className="text-[12px] font-medium text-neutral-400">
                      Module {i + 1} · {m.name}
                    </p>
                    <ul className="mt-2 overflow-hidden rounded-[12px] ring-1 ring-black/[0.06] dark:ring-white/[0.07]">
                      {m.lessons.map(([title, length, live]) => (
                        <li key={title} className="flex items-center gap-3 border-b border-black/[0.05] px-3 py-2.5 text-[13px] last:border-0 dark:border-white/[0.06]">
                          <PlayCircle className="size-4 text-neutral-400" />
                          <span className="flex-1 truncate text-neutral-900 dark:text-white">{title}</span>
                          <span className="tabular-nums text-neutral-400">{length}</span>
                          <span className={cn("w-[70px] text-right text-[12px]", live ? "text-emerald-600 dark:text-emerald-400" : "text-neutral-400")}>{live ? "Published" : "Draft"}</span>
                        </li>
                      ))}
                    </ul>
                  </section>
                ))}
              </div>
            ) : (
              <p className="mt-2 text-[13px] text-neutral-500">Open Lessons to see the course outline.</p>
            )}
          </div>
        </SidebarInset>
      </SidebarProvider>
    </div>
  );
}

37:T1150,"use client"; import { ChartNoAxesColumn, ChevronRight, CreditCard, FolderKanban, Home, LifeBuoy, Settings, Users } from "lucide-react"; import { useState } from "react"; import { Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, SidebarRail, SidebarTrigger, } from "@/components/scalar-ui/sidebar"; function StrataMark({ className }: { className?: string }) { return ( ); } const nav = [ { name: "Overview", icon: }, { name: "Projects", icon: , badge: 12 }, { name: "Customers", icon: }, { name: "Reports", icon: }, { name: "Billing", icon: }, ]; const stats = [ ["Revenue", "$48.2k", "+12.4%"], ["Active users", "3,214", "+4.1%"], ["Churn", "1.8%", "−0.3%"], ]; export default function Example() { const [active, setActive] = useState("Overview"); return (

}> Strata {nav.map((n) => ( setActive(n.name)}> {n.name} ))} }>Support } active={active === "Settings"} onClick={() => setActive("Settings")}> Settings

Strata {active}

Good morning, Sam

Here’s what changed since yesterday.

{stats.map(([label, value, delta]) => (

{label}

{value}

{delta}

))}

{[38, 52, 44, 61, 58, 72, 66, 80, 74, 88, 82, 95].map((h, i) => (

))}

); } 38:Tab0e,

"use client";

import { ChartNoAxesColumn, ChevronRight, CreditCard, FolderKanban, Home, LifeBuoy, Settings, Users } from "lucide-react";
import { useState } from "react";
import {
  Sidebar,
  SidebarButton,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarInset,
  SidebarItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/scalar-ui/sidebar";

function StrataMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
      <path d="M12 3 21 8l-9 5-9-5 9-5Z" fill="currentColor" />
      <path d="m3 12.5 9 5 9-5M3 16.5l9 5 9-5" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" opacity="0.55" />
    </svg>
  );
}

const nav = [
  { name: "Overview", icon: <Home /> },
  { name: "Projects", icon: <FolderKanban />, badge: 12 },
  { name: "Customers", icon: <Users /> },
  { name: "Reports", icon: <ChartNoAxesColumn /> },
  { name: "Billing", icon: <CreditCard /> },
];

const stats = [
  ["Revenue", "$48.2k", "+12.4%"],
  ["Active users", "3,214", "+4.1%"],
  ["Churn", "1.8%", "−0.3%"],
];

export default function Example() {
  const [active, setActive] = useState("Overview");
  return (
    <div className="h-[520px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <SidebarProvider>
        <Sidebar variant="inset" width={228}>
          <SidebarHeader>
            <SidebarButton size="lg" icon={<span className="flex size-7 items-center justify-center rounded-[8px] bg-gradient-to-b from-neutral-700 to-neutral-950 text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.2)]"><StrataMark className="size-4" /></span>}>
              <span className="text-[14px] font-semibold text-neutral-950 dark:text-white">Strata</span>
            </SidebarButton>
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup label="Workspace">
              {nav.map((n) => (
                <SidebarItem key={n.name} icon={n.icon} badge={n.badge} active={active === n.name} onClick={() => setActive(n.name)}>
                  {n.name}
                </SidebarItem>
              ))}
            </SidebarGroup>
          </SidebarContent>
          <SidebarFooter>
            <SidebarItem icon={<LifeBuoy />}>Support</SidebarItem>
            <SidebarItem icon={<Settings />} active={active === "Settings"} onClick={() => setActive("Settings")}>
              Settings
            </SidebarItem>
          </SidebarFooter>
          <SidebarRail />
        </Sidebar>
        <SidebarInset>
          <header className="flex h-12 shrink-0 items-center gap-1.5 px-3">
            <SidebarTrigger />
            <span className="text-[13px] text-neutral-400">Strata</span>
            <ChevronRight className="size-3.5 text-neutral-300" />
            <span className="text-[13px] font-medium text-neutral-900 dark:text-white">{active}</span>
          </header>
          <div className="flex-1 overflow-y-auto px-5 pb-5">
            <h2 className="pt-2 text-[20px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">Good morning, Sam</h2>
            <p className="text-[13px] text-neutral-500">Here’s what changed since yesterday.</p>
            <div className="mt-5 grid grid-cols-3 gap-2.5">
              {stats.map(([label, value, delta]) => (
                <div key={label} className="rounded-[14px] bg-neutral-50 p-3 ring-1 ring-black/[0.05] dark:bg-white/[0.04] dark:ring-white/[0.06]">
                  <p className="truncate text-[12px] text-neutral-500">{label}</p>
                  <p className="mt-1 text-[18px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">{value}</p>
                  <p className="text-[11.5px] font-medium text-emerald-600 dark:text-emerald-400">{delta}</p>
                </div>
              ))}
            </div>
            <div className="mt-3 flex h-[180px] items-end gap-1.5 rounded-[14px] bg-neutral-50 p-4 ring-1 ring-black/[0.05] dark:bg-white/[0.04] dark:ring-white/[0.06]">
              {[38, 52, 44, 61, 58, 72, 66, 80, 74, 88, 82, 95].map((h, i) => (
                <div key={i} className="flex-1 rounded-t-[5px] bg-neutral-950/80 dark:bg-white/80" style={{ height: `${h}%`, opacity: 0.25 + i * 0.06 }} />
              ))}
            </div>
          </div>
        </SidebarInset>
      </SidebarProvider>
    </div>
  );
}

39:T1105,"use client"; import { Archive, File, Inbox, PenSquare, Send, Star, Trash2 } from "lucide-react"; import { useState } from "react"; import { Sidebar, SidebarButton, SidebarContent, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, SidebarTrigger, } from "@/components/scalar-ui/sidebar"; function PostMark({ className }: { className?: string }) { return ( ); } const folders = [ { name: "Inbox", icon: , badge: 18 }, { name: "Starred", icon: }, { name: "Sent", icon: }, { name: "Drafts", icon: , badge: 2 }, { name: "Archive", icon: }, { name: "Trash", icon: }, ]; const labels = [ ["Product", "bg-amber-400"], ["Hiring", "bg-emerald-500"], ["Investors", "bg-rose-500"], ]; const mail = [ ["Ari Levi", "Design review moved to Thursday", "9:41"], ["Stripe", "Your October payout is on its way", "8:02"], ["Noor Haddad", "Offer letter: final version attached", "Yesterday"], ["Linear", "4 issues were assigned to you", "Yesterday"], ["Jon Park", "Re: pricing experiment results", "Mon"], ]; export default function Example() { const [active, setActive] = useState("Inbox"); return (

}> Post } className="bg-neutral-950 text-white! hover:bg-neutral-800 dark:bg-white dark:text-neutral-950! [&_svg]:text-current!"> Compose {folders.map((f) => ( setActive(f.name)}> {f.name} ))} {labels.map(([name, dot]) => ( } active={active === name} onClick={() => setActive(name)}> {name} ))}

{active}

{mail.map(([from, subject, time], i) => (

{from}

{subject}

{time}

))}

); } 3a:Tab99,

"use client";

import { Archive, File, Inbox, PenSquare, Send, Star, Trash2 } from "lucide-react";
import { useState } from "react";
import {
  Sidebar,
  SidebarButton,
  SidebarContent,
  SidebarGroup,
  SidebarHeader,
  SidebarInset,
  SidebarItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/scalar-ui/sidebar";

function PostMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
      <path d="M4 7.5 12 13l8-5.5" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
      <rect x="3" y="5" width="18" height="14" rx="4" stroke="currentColor" strokeWidth="2.2" />
    </svg>
  );
}

const folders = [
  { name: "Inbox", icon: <Inbox />, badge: 18 },
  { name: "Starred", icon: <Star /> },
  { name: "Sent", icon: <Send /> },
  { name: "Drafts", icon: <File />, badge: 2 },
  { name: "Archive", icon: <Archive /> },
  { name: "Trash", icon: <Trash2 /> },
];

const labels = [
  ["Product", "bg-amber-400"],
  ["Hiring", "bg-emerald-500"],
  ["Investors", "bg-rose-500"],
];

const mail = [
  ["Ari Levi", "Design review moved to Thursday", "9:41"],
  ["Stripe", "Your October payout is on its way", "8:02"],
  ["Noor Haddad", "Offer letter: final version attached", "Yesterday"],
  ["Linear", "4 issues were assigned to you", "Yesterday"],
  ["Jon Park", "Re: pricing experiment results", "Mon"],
];

export default function Example() {
  const [active, setActive] = useState("Inbox");
  return (
    <div className="h-[500px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <SidebarProvider>
        <Sidebar variant="floating" width={220}>
          <SidebarHeader>
            <SidebarButton size="lg" icon={<span className="flex size-7 items-center justify-center rounded-[8px] bg-rose-500 text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.25)]"><PostMark className="size-4" /></span>}>
              <span className="text-[14px] font-semibold text-neutral-950 dark:text-white">Post</span>
            </SidebarButton>
            <SidebarButton icon={<PenSquare />} className="bg-neutral-950 text-white! hover:bg-neutral-800 dark:bg-white dark:text-neutral-950! [&_svg]:text-current!">
              Compose
            </SidebarButton>
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup>
              {folders.map((f) => (
                <SidebarItem key={f.name} icon={f.icon} badge={f.badge} active={active === f.name} onClick={() => setActive(f.name)}>
                  {f.name}
                </SidebarItem>
              ))}
            </SidebarGroup>
            <SidebarGroup label="Labels">
              {labels.map(([name, dot]) => (
                <SidebarItem key={name} icon={<span className={`size-2 rounded-full ${dot}`} />} active={active === name} onClick={() => setActive(name)}>
                  {name}
                </SidebarItem>
              ))}
            </SidebarGroup>
          </SidebarContent>
        </Sidebar>
        <SidebarInset>
          <header className="flex h-12 shrink-0 items-center gap-2 px-3">
            <SidebarTrigger />
            <span className="text-[14px] font-semibold text-neutral-950 dark:text-white">{active}</span>
          </header>
          <div className="mx-2 mb-2 flex-1 overflow-y-auto rounded-[14px] bg-white ring-1 ring-black/[0.05] dark:bg-neutral-900 dark:ring-white/[0.07]">
            {mail.map(([from, subject, time], i) => (
              <div key={subject} className="flex items-center gap-3 border-b border-black/[0.05] px-4 py-3 last:border-0 dark:border-white/[0.06]">
                <span className={i < 2 ? "size-1.5 shrink-0 rounded-full bg-neutral-950 dark:bg-white" : "size-1.5 shrink-0"} />
                <div className="min-w-0 flex-1">
                  <p className={i < 2 ? "truncate text-[13px] font-semibold text-neutral-950 dark:text-white" : "truncate text-[13px] text-neutral-700 dark:text-neutral-300"}>{from}</p>
                  <p className="truncate text-[12.5px] text-neutral-500">{subject}</p>
                </div>
                <span className="shrink-0 text-[11.5px] text-neutral-400">{time}</span>
              </div>
            ))}
          </div>
        </SidebarInset>
      </SidebarProvider>
    </div>
  );
}

3b:Tb73,"use client"; import { Bell, Bookmark, Compass, Home, MessageCircle, Search, User } from "lucide-react"; import { useState } from "react"; import { Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, useSidebar } from "@/components/scalar-ui/sidebar"; function LoopMark({ className }: { className?: string }) { return ( ); } const nav = [ { name: "Home", icon: }, { name: "Explore", icon: }, { name: "Search", icon: }, { name: "Messages", icon: , badge: 3 }, { name: "Notifications", icon: , badge: 9 }, { name: "Saved", icon: }, ]; function Toggle() { const { open, toggle } = useSidebar(); return ( ); } export default function Example() { const [active, setActive] = useState("Home"); return (

}> Loop {nav.map((n) => ( setActive(n.name)}> {n.name} ))} } active={active === "Profile"} onClick={() => setActive("Profile")}> Profile

spring="bouncy" overshoots a little on open, close and every highlight. Try ⌘B.

); } 3c:T6bed,

"use client";

import { Bell, Bookmark, Compass, Home, MessageCircle, Search, User } from "lucide-react";
import { useState } from "react";
import { Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, useSidebar } from "@/components/scalar-ui/sidebar";

function LoopMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
      <path d="M8 8a4 4 0 1 0 0 8c2.5 0 3.5-2 4-4s1.5-4 4-4a4 4 0 1 1 0 8c-2.5 0-3.5-2-4-4s-1.5-4-4-4Z" stroke="currentColor" strokeWidth="2.4" />
    </svg>
  );
}

const nav = [
  { name: "Home", icon: <Home /> },
  { name: "Explore", icon: <Compass /> },
  { name: "Search", icon: <Search /> },
  { name: "Messages", icon: <MessageCircle />, badge: 3 },
  { name: "Notifications", icon: <Bell />, badge: 9 },
  { name: "Saved", icon: <Bookmark /> },
];

function Toggle() {
  const { open, toggle } = useSidebar();
  return (
    <button
      onClick={toggle}
      className="h-9 rounded-full bg-neutral-950 px-4 text-[13px] font-medium text-white outline-none transition-transform active:scale-95 dark:bg-white dark:text-neutral-950"
    >
      {open ? "Collapse" : "Expand"} sidebar
    </button>
  );
}

export default function Example() {
  const [active, setActive] = useState("Home");
  return (
    <div className="h-[460px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <SidebarProvider spring="bouncy">
        <Sidebar width={220}>
          <SidebarHeader>
            <SidebarButton size="lg" icon={<span className="flex size-7 items-center justify-center rounded-full bg-gradient-to-br from-amber-300 to-orange-500 text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.35)]"><LoopMark className="size-4" /></span>}>
              <span className="text-[14px] font-semibold text-neutral-950 dark:text-white">Loop</span>
            </SidebarButton>
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup>
              {nav.map((n) => (
                <SidebarItem key={n.name} icon={n.icon} badge={n.badge} active={active === n.name} onClick={() => setActive(n.name)}>
                  {n.name}
                </SidebarItem>
              ))}
            </SidebarGroup>
          </SidebarContent>
          <SidebarFooter>
            <SidebarItem icon={<User />} active={active === "Profile"} onClick={() => setActive("Profile")}>
              Profile
            </SidebarItem>
          </SidebarFooter>
        </Sidebar>
        <SidebarInset className="items-center justify-center gap-3">
          <Toggle />
          <p className="max-w-[260px] text-center text-[12.5px] text-neutral-500">spring=&quot;bouncy&quot; overshoots a little on open, close and every highlight. Try ⌘B.</p>
        </SidebarInset>
      </SidebarProvider>
    </div>
  );
}

3d:T17cd,"use client"; import { motion } from "motion/react"; import { Bug, Calendar, CircleDot, FileText, GitPullRequest, Inbox, Layers, MessagesSquare, Plus, Settings, Users } from "lucide-react"; import { useState } from "react"; import { Sidebar, SidebarContent, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, SidebarTrigger } from "@/components/scalar-ui/sidebar"; function ArcMark({ className }: { className?: string }) { return ( ); } type Link = { name: string; icon: typeof Inbox; count?: number }; const apps: Record }> = { Issues: { icon: Layers, groups: { Views: [ { name: "My issues", icon: CircleDot, count: 7 }, { name: "Inbox", icon: Inbox, count: 3 }, { name: "Bugs", icon: Bug, count: 12 }, ], Teams: [ { name: "Design", icon: Users }, { name: "Platform", icon: Users }, ], }, }, Code: { icon: GitPullRequest, groups: { Repository: [ { name: "Pull requests", icon: GitPullRequest, count: 4 }, { name: "Issues", icon: CircleDot }, ], }, }, Docs: { icon: FileText, groups: { Spaces: [ { name: "Handbook", icon: FileText }, { name: "RFCs", icon: FileText, count: 2 }, { name: "Meeting notes", icon: Calendar }, ], }, }, Chat: { icon: MessagesSquare, groups: { Channels: [ { name: "# general", icon: MessagesSquare }, { name: "# launches", icon: MessagesSquare, count: 5 }, { name: "# random", icon: MessagesSquare }, ], }, }, }; type App = string; const railButton = "relative flex size-9 items-center justify-center rounded-[10px] text-neutral-500 outline-none transition-colors hover:text-neutral-900 focus-visible:bg-neutral-950/[0.05] dark:hover:text-white"; export default function Example() { const [app, setApp] = useState("Issues"); const [active, setActive] = useState("My issues"); return (

{app}

{Object.entries(apps[app].groups).map(([label, items]) => ( {items.map(({ name, icon: Icon, count }) => ( } badge={count} active={active === name} onClick={() => setActive(name)}> {name} ))} ))}

{active}

{["Fix flaky checkout test", "Empty state for search", "Rename workspace setting", "Keyboard shortcut sheet"].map((t, i) => (

{t} ARC-{214 + i}

))}

); } 3e:Td394,

"use client";

import { motion } from "motion/react";
import { Bug, Calendar, CircleDot, FileText, GitPullRequest, Inbox, Layers, MessagesSquare, Plus, Settings, Users } from "lucide-react";
import { useState } from "react";
import { Sidebar, SidebarContent, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, SidebarTrigger } from "@/components/scalar-ui/sidebar";

function ArcMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
      <path d="M5 19a7 7 0 0 1 14 0" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" />
      <circle cx="12" cy="7" r="3" fill="currentColor" />
    </svg>
  );
}

type Link = { name: string; icon: typeof Inbox; count?: number };

const apps: Record<string, { icon: typeof Inbox; groups: Record<string, Link[]> }> = {
  Issues: {
    icon: Layers,
    groups: {
      Views: [
        { name: "My issues", icon: CircleDot, count: 7 },
        { name: "Inbox", icon: Inbox, count: 3 },
        { name: "Bugs", icon: Bug, count: 12 },
      ],
      Teams: [
        { name: "Design", icon: Users },
        { name: "Platform", icon: Users },
      ],
    },
  },
  Code: {
    icon: GitPullRequest,
    groups: {
      Repository: [
        { name: "Pull requests", icon: GitPullRequest, count: 4 },
        { name: "Issues", icon: CircleDot },
      ],
    },
  },
  Docs: {
    icon: FileText,
    groups: {
      Spaces: [
        { name: "Handbook", icon: FileText },
        { name: "RFCs", icon: FileText, count: 2 },
        { name: "Meeting notes", icon: Calendar },
      ],
    },
  },
  Chat: {
    icon: MessagesSquare,
    groups: {
      Channels: [
        { name: "# general", icon: MessagesSquare },
        { name: "# launches", icon: MessagesSquare, count: 5 },
        { name: "# random", icon: MessagesSquare },
      ],
    },
  },
};

type App = string;

const railButton =
  "relative flex size-9 items-center justify-center rounded-[10px] text-neutral-500 outline-none transition-colors hover:text-neutral-900 focus-visible:bg-neutral-950/[0.05] dark:hover:text-white";

export default function Example() {
  const [app, setApp] = useState<App>("Issues");
  const [active, setActive] = useState("My issues");
  return (
    <div className="h-[480px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <SidebarProvider>
        <nav aria-label="Apps" className="flex w-[56px] shrink-0 flex-col items-center gap-1.5 border-r border-black/[0.06] bg-neutral-100/70 py-3 dark:border-white/[0.07] dark:bg-black">
          <span className="mb-2 flex size-8 items-center justify-center rounded-[10px] bg-neutral-950 text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.2)] dark:bg-white dark:text-neutral-950">
            <ArcMark className="size-4" />
          </span>
          {Object.keys(apps).map((name) => {
            const Icon = apps[name].icon;
            return (
              <button key={name} aria-label={name} aria-current={app === name ? "page" : undefined} onClick={() => setApp(name)} className={railButton}>
                {app === name && (
                  <motion.span
                    layoutId="rail-active"
                    className="absolute inset-0 rounded-[10px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.08)] ring-1 ring-black/[0.06] dark:bg-white/[0.1] dark:ring-white/[0.08]"
                    transition={{ type: "spring", bounce: 0.25, duration: 0.45 }}
                  />
                )}
                <Icon className={app === name ? "relative size-4 text-neutral-950 dark:text-white" : "relative size-4"} />
              </button>
            );
          })}
          <button aria-label="Settings" className={`${railButton} mt-auto`}>
            <Settings className="size-4" />
          </button>
        </nav>
        <Sidebar collapsible="offcanvas" width={210}>
          <SidebarHeader>
            <div className="flex h-8 items-center justify-between px-2">
              <span className="text-[14px] font-semibold text-neutral-950 dark:text-white">{app}</span>
              <button aria-label={`New in ${app}`} className="flex size-7 items-center justify-center rounded-[8px] text-neutral-500 hover:bg-neutral-950/[0.05] hover:text-neutral-900 dark:hover:bg-white/[0.08] dark:hover:text-white">
                <Plus className="size-4" />
              </button>
            </div>
          </SidebarHeader>
          <SidebarContent key={app}>
            {Object.entries(apps[app].groups).map(([label, items]) => (
              <SidebarGroup key={label} label={label}>
                {items.map(({ name, icon: Icon, count }) => (
                  <SidebarItem key={name} icon={<Icon />} badge={count} active={active === name} onClick={() => setActive(name)}>
                    {name}
                  </SidebarItem>
                ))}
              </SidebarGroup>
            ))}
          </SidebarContent>
        </Sidebar>
        <SidebarInset>
          <header className="flex h-12 shrink-0 items-center gap-2 border-b border-black/[0.06] px-3 dark:border-white/[0.07]">
            <SidebarTrigger />
            <span className="text-[13.5px] font-medium text-neutral-900 dark:text-white">{active}</span>
          </header>
          <div className="flex-1 space-y-2 overflow-y-auto p-4">
            {["Fix flaky checkout test", "Empty state for search", "Rename workspace setting", "Keyboard shortcut sheet"].map((t, i) => (
              <div key={t} className="flex items-center gap-3 rounded-[12px] px-3 py-2.5 ring-1 ring-black/[0.05] dark:ring-white/[0.07]">
                <CircleDot className={i === 0 ? "size-4 text-amber-500" : "size-4 text-neutral-400"} />
                <span className="flex-1 truncate text-[13px] text-neutral-800 dark:text-neutral-200">{t}</span>
                <span className="font-mono text-[11px] text-neutral-400">ARC-{214 + i}</span>
              </div>
            ))}
          </div>
        </SidebarInset>
      </SidebarProvider>
    </div>
  );
}

3f:T1a81,"use client"; import { Check, ChevronsUpDown, Coins, FolderOpen, Home, Megaphone, Plus, Settings, Wand2 } from "lucide-react"; import { useState } from "react"; import { Sidebar, SidebarButton, SidebarCard, SidebarContent, SidebarDropdown, SidebarDropdownContent, SidebarDropdownItem, SidebarDropdownLabel, SidebarDropdownSeparator, SidebarDropdownTrigger, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, SidebarRail, SidebarTrigger, } from "@/components/scalar-ui/sidebar"; function KiteMark({ className }: { className?: string }) { return ( ); } const teams = [ { name: "Kite Studio", plan: "Pro", members: 12, tile: "bg-amber-500" }, { name: "Kite Labs", plan: "Team", members: 34, tile: "bg-teal-600" }, { name: "Personal", plan: "Free", members: 1, tile: "bg-neutral-800" }, ]; export default function Example() { const [team, setTeam] = useState(teams[0]); const used = 7240; const total = 10000; return (

} > {team.name} {team.plan} · {team.members} {team.members === 1 ? "member" : "members"} Switch team {teams.map((t) => ( setTeam(t)} className="h-11"> {t.name} {t.plan} · {t.members} {t.members === 1 ? "member" : "members"} {t.name === team.name && } ))} Create team Team settings } active> Home }>Generate } badge={24}> Library

Credits {used.toLocaleString()} / {total.toLocaleString()}

Resets on Nov 1.

Home

Teams can now share credit pools

Switch teams from the menu at the top left.

); } 40:Td70c,

"use client";

import { Check, ChevronsUpDown, Coins, FolderOpen, Home, Megaphone, Plus, Settings, Wand2 } from "lucide-react";
import { useState } from "react";
import {
  Sidebar,
  SidebarButton,
  SidebarCard,
  SidebarContent,
  SidebarDropdown,
  SidebarDropdownContent,
  SidebarDropdownItem,
  SidebarDropdownLabel,
  SidebarDropdownSeparator,
  SidebarDropdownTrigger,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarInset,
  SidebarItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/scalar-ui/sidebar";

function KiteMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} aria-hidden>
      <path d="M12 2.5 19 11l-7 10.5L5 11z" fill="currentColor" opacity="0.45" />
      <path d="M12 2.5 19 11h-7z" fill="currentColor" />
    </svg>
  );
}

const teams = [
  { name: "Kite Studio", plan: "Pro", members: 12, tile: "bg-amber-500" },
  { name: "Kite Labs", plan: "Team", members: 34, tile: "bg-teal-600" },
  { name: "Personal", plan: "Free", members: 1, tile: "bg-neutral-800" },
];

export default function Example() {
  const [team, setTeam] = useState(teams[0]);
  const used = 7240;
  const total = 10000;
  return (
    <div className="h-[540px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <SidebarProvider>
        <Sidebar width={236}>
          <SidebarHeader>
            <SidebarDropdown>
              <SidebarDropdownTrigger asChild>
                <SidebarButton
                  size="lg"
                  tooltip={team.name}
                  icon={
                    <span className={`flex size-7 items-center justify-center rounded-[8px] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.25)] ${team.tile}`}>
                      <KiteMark className="size-4" />
                    </span>
                  }
                >
                  <span className="flex flex-col leading-tight">
                    <span className="truncate text-[13.5px] font-semibold text-neutral-950 dark:text-white">{team.name}</span>
                    <span className="truncate text-[11.5px] font-normal text-neutral-500">
                      {team.plan} · {team.members} {team.members === 1 ? "member" : "members"}
                    </span>
                  </span>
                  <ChevronsUpDown className="ml-auto size-3.5 shrink-0 text-neutral-400" />
                </SidebarButton>
              </SidebarDropdownTrigger>
              <SidebarDropdownContent className="w-[260px]">
                <SidebarDropdownLabel>Switch team</SidebarDropdownLabel>
                {teams.map((t) => (
                  <SidebarDropdownItem key={t.name} onSelect={() => setTeam(t)} className="h-11">
                    <span className={`flex size-7 items-center justify-center rounded-[8px] text-white ${t.tile}`}>
                      <KiteMark className="size-3.5! text-current!" />
                    </span>
                    <span className="flex flex-1 flex-col leading-tight">
                      <span className="text-[13px] font-medium text-neutral-900 dark:text-white">{t.name}</span>
                      <span className="text-[11.5px] text-neutral-500">
                        {t.plan} · {t.members} {t.members === 1 ? "member" : "members"}
                      </span>
                    </span>
                    {t.name === team.name && <Check className="text-neutral-900! dark:text-white!" />}
                  </SidebarDropdownItem>
                ))}
                <SidebarDropdownSeparator />
                <SidebarDropdownItem>
                  <Plus />
                  Create team
                </SidebarDropdownItem>
                <SidebarDropdownItem>
                  <Settings />
                  Team settings
                </SidebarDropdownItem>
              </SidebarDropdownContent>
            </SidebarDropdown>
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup>
              <SidebarItem icon={<Home />} active>
                Home
              </SidebarItem>
              <SidebarItem icon={<Wand2 />}>Generate</SidebarItem>
              <SidebarItem icon={<FolderOpen />} badge={24}>
                Library
              </SidebarItem>
            </SidebarGroup>
          </SidebarContent>
          <SidebarFooter>
            <SidebarCard>
              <div className="flex items-center gap-2">
                <Coins className="size-3.5 text-neutral-500" />
                <span className="font-medium text-neutral-900 dark:text-white">Credits</span>
                <span className="ml-auto tabular-nums text-neutral-500">
                  {used.toLocaleString()} / {total.toLocaleString()}
                </span>
              </div>
              <div className="mt-2.5 h-1.5 overflow-hidden rounded-full bg-neutral-950/[0.07] dark:bg-white/[0.1]">
                <div className="h-full rounded-full bg-neutral-950 dark:bg-white" style={{ width: `${(used / total) * 100}%` }} />
              </div>
              <p className="mt-2 text-[12px] text-neutral-500">Resets on Nov 1.</p>
              <button className="mt-3 flex h-8 w-full items-center justify-center rounded-[9px] bg-neutral-950 text-[12.5px] font-medium text-white outline-none transition-colors hover:bg-neutral-800 focus-visible:bg-neutral-700 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200">
                Upgrade to Team
              </button>
            </SidebarCard>
          </SidebarFooter>
          <SidebarRail />
        </Sidebar>
        <SidebarInset>
          <header className="flex h-12 shrink-0 items-center gap-2 px-3">
            <SidebarTrigger />
            <span className="text-[13.5px] font-medium text-neutral-900 dark:text-white">Home</span>
          </header>
          <div className="px-5">
            <div className="flex items-center gap-3 rounded-[14px] bg-neutral-50 p-3 ring-1 ring-black/[0.05] dark:bg-white/[0.04] dark:ring-white/[0.06]">
              <span className="flex size-8 items-center justify-center rounded-[9px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.07] dark:bg-neutral-800 dark:ring-white/[0.1]">
                <Megaphone className="size-4 text-neutral-700 dark:text-neutral-300" />
              </span>
              <div className="min-w-0 flex-1">
                <p className="truncate text-[13px] font-medium text-neutral-900 dark:text-white">Teams can now share credit pools</p>
                <p className="truncate text-[12px] text-neutral-500">Switch teams from the menu at the top left.</p>
              </div>
            </div>
          </div>
        </SidebarInset>
      </SidebarProvider>
    </div>
  );
}

41:T1498,"use client"; import { Reorder } from "motion/react"; import { CalendarDays, FileText, GripVertical, Hash, Home, Inbox, Plus, Search, Star } from "lucide-react"; import { useState, type ReactNode } from "react"; import { Sidebar, SidebarButton, SidebarContent, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, SidebarRail, SidebarSubItem, SidebarSubmenu, SidebarTrigger, } from "@/components/scalar-ui/sidebar"; function PetalMark({ className }: { className?: string }) { return ( ); } const projects = [ { name: "Website relaunch", color: "bg-amber-400", pages: ["Sitemap", "Copy deck", "Launch plan"] }, { name: "Mobile app", color: "bg-emerald-500", pages: ["Roadmap", "Research"] }, { name: "Brand refresh", color: "bg-rose-500", pages: ["Moodboard"] }, ]; const icons: Record = { "Q4 planning": , "Design crit notes": , "#launch-room": , "Hiring tracker": , }; export default function Example() { const [favourites, setFavourites] = useState(Object.keys(icons)); const [active, setActive] = useState("Q4 planning"); return (

}> Petal } kbd="⌘K"> Search } active={active === "Home"} onClick={() => setActive("Home")}> Home } badge={6} active={active === "Inbox"} onClick={() => setActive("Inbox")}> Inbox

Favourites

{favourites.map((name) => ( setActive(name)} className="cursor-grab active:cursor-grabbing"> {name} ))}

} > {projects.map((p, i) => ( }> {p.pages.map((page) => ( setActive(`${p.name}/${page}`)}> {page} ))} ))}

{active.split("/").join(" / ")}

{active.split("/").pop()}

Drag favourites to reorder them. Projects open into their pages.

); } 42:Tc4ed,

"use client";

import { Reorder } from "motion/react";
import { CalendarDays, FileText, GripVertical, Hash, Home, Inbox, Plus, Search, Star } from "lucide-react";
import { useState, type ReactNode } from "react";
import {
  Sidebar,
  SidebarButton,
  SidebarContent,
  SidebarGroup,
  SidebarHeader,
  SidebarInset,
  SidebarItem,
  SidebarProvider,
  SidebarRail,
  SidebarSubItem,
  SidebarSubmenu,
  SidebarTrigger,
} from "@/components/scalar-ui/sidebar";

function PetalMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} aria-hidden>
      <path d="M12 3c3 3 3 6 0 9-3-3-3-6 0-9Zm0 18c-3-3-3-6 0-9 3 3 3 6 0 9ZM3 12c3-3 6-3 9 0-3 3-6 3-9 0Zm18 0c-3 3-6 3-9 0 3-3 6-3 9 0Z" fill="currentColor" />
    </svg>
  );
}

const projects = [
  { name: "Website relaunch", color: "bg-amber-400", pages: ["Sitemap", "Copy deck", "Launch plan"] },
  { name: "Mobile app", color: "bg-emerald-500", pages: ["Roadmap", "Research"] },
  { name: "Brand refresh", color: "bg-rose-500", pages: ["Moodboard"] },
];

const icons: Record<string, ReactNode> = {
  "Q4 planning": <CalendarDays />,
  "Design crit notes": <FileText />,
  "#launch-room": <Hash />,
  "Hiring tracker": <Star />,
};

export default function Example() {
  const [favourites, setFavourites] = useState(Object.keys(icons));
  const [active, setActive] = useState("Q4 planning");
  return (
    <div className="h-[540px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <SidebarProvider>
        <Sidebar width={240}>
          <SidebarHeader>
            <SidebarButton size="lg" icon={<span className="flex size-7 items-center justify-center rounded-[8px] bg-white text-rose-500 shadow-[0_1px_2px_rgb(0_0_0/0.08)] ring-1 ring-black/[0.07] dark:bg-neutral-800 dark:ring-white/[0.1]"><PetalMark className="size-4" /></span>}>
              <span className="text-[14px] font-semibold text-neutral-950 dark:text-white">Petal</span>
            </SidebarButton>
            <SidebarItem icon={<Search />} kbd="⌘K">
              Search
            </SidebarItem>
            <SidebarItem icon={<Home />} active={active === "Home"} onClick={() => setActive("Home")}>
              Home
            </SidebarItem>
            <SidebarItem icon={<Inbox />} badge={6} active={active === "Inbox"} onClick={() => setActive("Inbox")}>
              Inbox
            </SidebarItem>
          </SidebarHeader>
          <SidebarContent>
            <div className="flex flex-col">
              <p className="flex h-7 items-center whitespace-nowrap px-2 text-[12px] font-medium text-neutral-400 in-data-[state=collapsed]:opacity-0">Favourites</p>
              <Reorder.Group axis="y" values={favourites} onReorder={setFavourites} className="flex flex-col gap-px">
                {favourites.map((name) => (
                  <Reorder.Item key={name} value={name} className="group/fav relative flex" whileDrag={{ scale: 1.02, zIndex: 10 }}>
                    <SidebarButton icon={icons[name]} active={active === name} onClick={() => setActive(name)} className="cursor-grab active:cursor-grabbing">
                      {name}
                    </SidebarButton>
                    <GripVertical className="pointer-events-none absolute right-2 top-2 size-4 text-neutral-300 opacity-0 transition-opacity group-hover/fav:opacity-100 in-data-[state=collapsed]:hidden dark:text-neutral-600" />
                  </Reorder.Item>
                ))}
              </Reorder.Group>
            </div>
            <SidebarGroup
              label="Projects"
              collapsible
              action={
                <button aria-label="New project" className="flex size-6 items-center justify-center rounded-[6px] text-neutral-400 hover:bg-neutral-950/[0.06] hover:text-neutral-800 dark:hover:bg-white/[0.08] dark:hover:text-white">
                  <Plus className="size-3.5" />
                </button>
              }
            >
              {projects.map((p, i) => (
                <SidebarSubmenu key={p.name} label={p.name} defaultOpen={i === 0} icon={<span className={`size-2.5 rounded-[3px] ${p.color}`} />}>
                  {p.pages.map((page) => (
                    <SidebarSubItem key={page} active={active === `${p.name}/${page}`} onClick={() => setActive(`${p.name}/${page}`)}>
                      {page}
                    </SidebarSubItem>
                  ))}
                </SidebarSubmenu>
              ))}
            </SidebarGroup>
          </SidebarContent>
          <SidebarRail />
        </Sidebar>
        <SidebarInset>
          <header className="flex h-12 shrink-0 items-center gap-2 px-3">
            <SidebarTrigger />
            <span className="truncate text-[13.5px] font-medium text-neutral-900 dark:text-white">{active.split("/").join(" / ")}</span>
          </header>
          <div className="px-6 pt-4">
            <p className="text-[22px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">{active.split("/").pop()}</p>
            <p className="mt-1 text-[13px] text-neutral-500">Drag favourites to reorder them. Projects open into their pages.</p>
          </div>
        </SidebarInset>
      </SidebarProvider>
    </div>
  );
}

43:Tf75,"use client"; import { CalendarDays, CircleDot, Flag, Home, Layers, PanelRight, Tag, User } from "lucide-react"; import { Sidebar, SidebarContent, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, SidebarTrigger } from "@/components/scalar-ui/sidebar"; const details = [ { label: "Status", icon: CircleDot, value: In progress }, { label: "Assignee", icon: User, value: "Noor Haddad" }, { label: "Priority", icon: Flag, value: "High" }, { label: "Due", icon: CalendarDays, value: "Oct 18" }, { label: "Labels", icon: Tag, value: {["Billing", "Web"].map((l) => {l})} }, ]; export default function Example() { return (

}>Home } active> Issues

BIL-482 Prorate upgrades mid-cycle

When a customer upgrades in the middle of a billing period, charge only for the days left. Show the prorated amount on the confirm step and the invoice.

{[92, 76, 84].map((w, i) => (

))}

The right panel has its own provider: ⌘I toggles it, ⌘B the left one.

Details

{label}: {value}

); } 44:T827b,

"use client";

import { CalendarDays, CircleDot, Flag, Home, Layers, PanelRight, Tag, User } from "lucide-react";
import { Sidebar, SidebarContent, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, SidebarTrigger } from "@/components/scalar-ui/sidebar";

const details = [
  { label: "Status", icon: CircleDot, value: <span className="flex items-center gap-1.5"><span className="size-2 rounded-full bg-amber-500" />In progress</span> },
  { label: "Assignee", icon: User, value: "Noor Haddad" },
  { label: "Priority", icon: Flag, value: "High" },
  { label: "Due", icon: CalendarDays, value: "Oct 18" },
  { label: "Labels", icon: Tag, value: <span className="flex gap-1">{["Billing", "Web"].map((l) => <span key={l} className="rounded-[6px] bg-neutral-950/[0.05] px-1.5 py-0.5 text-[11.5px] dark:bg-white/[0.08]">{l}</span>)}</span> },
];

export default function Example() {
  return (
    <div className="h-[480px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <SidebarProvider defaultOpen={false}>
        <Sidebar width={200}>
          <SidebarContent className="pt-2">
            <SidebarGroup>
              <SidebarItem icon={<Home />}>Home</SidebarItem>
              <SidebarItem icon={<Layers />} active>
                Issues
              </SidebarItem>
            </SidebarGroup>
          </SidebarContent>
        </Sidebar>
        <SidebarInset>
          <SidebarProvider breakpoint={0} shortcut="i" className="bg-transparent dark:bg-transparent">
            <div className="flex min-w-0 flex-1 flex-col">
              <header className="flex h-12 shrink-0 items-center gap-2 border-b border-black/[0.06] px-4 dark:border-white/[0.07]">
                <span className="font-mono text-[12px] text-neutral-400">BIL-482</span>
                <span className="truncate text-[13.5px] font-medium text-neutral-900 dark:text-white">Prorate upgrades mid-cycle</span>
                <SidebarTrigger className="ml-auto">
                  <PanelRight className="size-4" />
                </SidebarTrigger>
              </header>
              <div className="flex-1 overflow-y-auto p-5">
                <p className="text-[13.5px] leading-relaxed text-neutral-600 dark:text-neutral-400">
                  When a customer upgrades in the middle of a billing period, charge only for the days left. Show the prorated amount on the confirm step and the invoice.
                </p>
                <div className="mt-5 space-y-2">
                  {[92, 76, 84].map((w, i) => (
                    <div key={i} className="h-2 rounded-full bg-neutral-950/[0.06] dark:bg-white/[0.08]" style={{ width: `${w}%` }} />
                  ))}
                </div>
                <p className="mt-6 text-[12px] text-neutral-400">The right panel has its own provider: ⌘I toggles it, ⌘B the left one.</p>
              </div>
            </div>
            <Sidebar side="right" collapsible="offcanvas" width={230}>
              <SidebarHeader>
                <p className="px-2 pt-1 text-[12px] font-medium text-neutral-400">Details</p>
              </SidebarHeader>
              <SidebarContent>
                <dl className="flex flex-col">
                  {details.map(({ label, icon: Icon, value }) => (
                    <div key={label} className="flex h-9 items-center gap-2 whitespace-nowrap px-2 text-[13px]">
                      <dt className="flex w-[84px] shrink-0 items-center gap-2 text-neutral-500">
                        <Icon className="size-3.5" />
                        {label}
                      </dt>
                      <dd className="min-w-0 truncate text-neutral-900 dark:text-neutral-100">{value}</dd>
                    </div>
                  ))}
                </dl>
              </SidebarContent>
            </Sidebar>
          </SidebarProvider>
        </SidebarInset>
      </SidebarProvider>
    </div>
  );
}

29:["$","section","sidebar",{"id":"sidebar","aria-labelledby":"sidebar-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"sidebar-title","className":"sr-only","children":"Sidebar"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · motion · lucide-react"}]]}],false]}],["$","$L2d",null,{"children":["$","$L2e",null,{"slug":"sidebar","gated":{"unlocked":true,"files":[{"name":"sidebar.tsx","code":"$2f","html":"$30"},{"name":"demo.tsx","code":"$31","html":"$32"}],"examples":{"dark":{"name":"dark.tsx","code":"$33","html":"$34"},"sections":{"name":"sections.tsx","code":"$35","html":"$36"},"inset":{"name":"inset.tsx","code":"$37","html":"$38"},"floating":{"name":"floating.tsx","code":"$39","html":"$3a"},"bouncy":{"name":"bouncy.tsx","code":"$3b","html":"$3c"},"dual-rail":{"name":"dual-rail.tsx","code":"$3d","html":"$3e"},"workspace-switcher":{"name":"workspace-switcher.tsx","code":"$3f","html":"$40"},"favourites":{"name":"favourites.tsx","code":"$41","html":"$42"},"right-panel":{"name":"right-panel.tsx","code":"$43","html":"$44"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add sidebar","shadcn":"npx shadcn@latest add https://scalarui.com/r/sidebar.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L45","toolbar":"$L46"}]}],["$L47","$L48","$L49","$L4a","$L4b","$L4c","$L4d","$L4e","$L4f"]]}]

Sidebars

Sidebars