FreeIn reviewv1.0.0

App Sidebar

An app sidebar with a brand, titled groups of links, badges and the current page in the accent.

npx shadcn@latest add @vibebox/app-sidebar

Content

Controls

Accent

<AppSidebar />

About

A sidebar that does one job. Use it inside your own layout; collapse it with your own state.

Use it when

A signed-in area has a handful of destinations.

Skip it when

Navigation is deep: add your own tree component.

Install

1Add the VibeBox registry to components.json:

{
  "registries": {
    "@vibebox": "https://motion.vibeboxph.com/r/{name}.json"
  }
}

2Add the component with the shadcn CLI:
npx shadcn@latest add @vibebox/app-sidebar

3Use it:

import { AppSidebar } from "@/components/vibebox/app-sidebar";

<AppSidebar accent="#7c5cff" />

AI prompt

Everything an AI coding tool needs to rebuild this component the way it looks here: colours, fonts, the art it draws, props and rules.

Read the prompt

Build the VibeBox Motion component "App Sidebar" (Navigation) in a Next.js App Router project with Tailwind CSS v4.

What it is
- An app sidebar with a brand, titled groups of links, badges and the current page in the accent.
- The left rail of an application: a brand mark, groups of links under small mono titles, optional count badges, and the current page marked with `aria-current` and an accent wash. Plain anchors, so it works with any router.

Install
- `npx shadcn@latest add @vibebox/app-sidebar`
- Registry: add `"@vibebox": "https://motion.vibeboxph.com/r/{name}.json"` to components.json, then run the command. The source lands in `components/vibebox/app-sidebar` and is yours to edit.

Visual spec
- Colours (the VibeBox spectrum, the same in light and dark):
    - --spectrum-1: #00c5fc (cyan)
    - --spectrum-2: #1d6ef0 (blue)
    - --spectrum-3: #5225ed (indigo)
    - --spectrum-4: #e434dc (magenta)
    - --spectrum-5: #fd3aa9 (pink)
    - --spectrum-6: #f98472 (coral)
    - --spectrum-7: #fcbe72 (amber)
- Ink surface (dark): background #05070c, card #0a0d15, text #f5f6fa, muted text #a3abbd, border rgba(255,255,255,0.08).
- Paper surface (light): background #f3f0ea, card #fbfaf7, text #0c0e14, muted text #4a4f5c, border rgba(12,14,20,0.12).
- Fonts:
    - Display and body: Figtree (400, 500, 600, 700), falling back to ui-sans-serif, system-ui.
    - Emphasis: Fraunces italic, for one or two words of a heading.
    - Labels and code: JetBrains Mono (400, 500), uppercase labels with 0.14em tracking.
- Shape: radius 8 to 12px on cards and panels; pills may be fully round. Hairline borders, soft glow instead of heavy shadow.
- Motion: animate transform and opacity only; fast ease-out (cubic-bezier(0.16, 1, 0.3, 1)), 140ms for micro-interactions, 320 to 520ms for reveals.

Art and media
- Built from HTML, CSS and inline SVG only; no image files or video.

Props
- `brand`: `string` (default "Studio"). The product name (its first letter marks it).
- `groups`: `{ title?: string; items: { label: string; href?: string; badge?: string; current?: boolean }[] }[]`. Groups of navigation links.
- `accent`: `string` (default "blue"). The accent colour: blue, violet, emerald, amber, rose, or any CSS colour. It sets --app-accent on the root, so a parent can set it once for a whole screen.
- `className`: `string`. Merged with cn(); give it a width.

Behaviour and access
- Reduced motion: Nothing animates on its own.
- Keyboard: Every control is a native element in reading order.
- Screen readers: Semantic elements with accessible names; decorative marks are hidden.
- Touch: Targets are 36 px or larger; nothing depends on hover.
- Budget: about 0 KB of JavaScript, WebGL none, GPU none. It pauses while off screen.

Theming
Everything reads `--app-accent` (set by the `accent` prop, or by a parent) and the mode's tokens, so light and dark and any brand colour work without code changes. Pass a named accent or any CSS colour; Launchpad sets it once per app from the client's theme.

Usage
```tsx
import { AppSidebar } from "@/components/vibebox/app-sidebar";

<AppSidebar accent="#7c5cff" />
```

Notes
Add the VibeBox Motion App Sidebar with `npx shadcn@latest add @vibebox/app-sidebar`. Pass your route list as groups; mark the current one from the router. Set the brand colour once with `--app-accent` on a parent (or the `accent` prop). It follows light and dark through the tokens; keep the licence header.

Rules
- Keep the licence header on every installed file.
- Original code only: do not copy components from other libraries, and do not add GSAP.
- Use tokens for colour, type and radius; no hard-coded brand values.
- Server Components by default; `"use client"` only for the island.

Code

1 files

components/vibebox/app-sidebar/index.tsx

/**
 * VibeBox Motion · App Sidebar
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import { cn } from "@/lib/utils";
import { accentStyle } from "@/lib/vibebox/app-accent";

export type SidebarItem = { label: string; href?: string; badge?: string; current?: boolean };
export type SidebarGroup = { title?: string; items: SidebarItem[] };
export type AppSidebarProps = { brand?: string; groups?: SidebarGroup[]; accent?: string; className?: string };

const SAMPLE: SidebarGroup[] = [
  { items: [{ label: "Overview", current: true }, { label: "Bookings", badge: "12" }, { label: "Clients" }] },
  { title: "Studio", items: [{ label: "Calendar" }, { label: "Messages", badge: "3" }, { label: "Reports" }] },
  { title: "Account", items: [{ label: "Billing" }, { label: "Settings" }] },
];

/** A sidebar: brand, groups of links with optional badges, the current page marked with the accent. */
export function AppSidebar({ brand = "Studio", groups = SAMPLE, accent, className }: AppSidebarProps) {
  return (
    <nav aria-label="Application" data-vb="app-sidebar" style={accentStyle(accent)} className={cn("flex w-full flex-col gap-4 rounded-xl border border-border bg-card p-3", className)}>
      <p className="flex items-center gap-2 px-2 pt-1 font-semibold"><span aria-hidden="true" className="inline-grid size-6 place-items-center rounded-md bg-[var(--app-accent)] text-[0.7rem] text-[var(--app-accent-fg,#fff)]">{brand.slice(0, 1)}</span>{brand}</p>
      {groups.map((group, g) => (
        <div key={g} className="grid gap-0.5">
          {group.title && <h2 className="px-2 pb-1 font-mono text-[0.64rem] tracking-wide text-subtle-foreground uppercase">{group.title}</h2>}
          {group.items.map((item) => (
            <a
              key={item.label}
              href={item.href ?? "#"}
              aria-current={item.current ? "page" : undefined}
              className={cn(
                "flex items-center justify-between rounded-md px-2 py-1.5 text-small text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring",
                "aria-[current=page]:font-medium aria-[current=page]:text-foreground aria-[current=page]:bg-[color-mix(in_oklab,var(--app-accent)_14%,transparent)]",
              )}
            >
              {item.label}
              {item.badge && <span className="rounded-full bg-[var(--app-accent)] px-1.5 text-[0.65rem] leading-4 text-[var(--app-accent-fg,#fff)]">{item.badge}</span>}
            </a>
          ))}
        </div>
      ))}
    </nav>
  );
}

Props

Prop	Type	Default	Description
brand	string	"Studio"	The product name (its first letter marks it).
groups	{ title?: string; items: { label: string; href?: string; badge?: string; current?: boolean }[] }[]	—	Groups of navigation links.
accent	string	"blue"	The accent colour: blue, violet, emerald, amber, rose, or any CSS colour. It sets --app-accent on the root, so a parent can set it once for a whole screen.
className	string	—	Merged with cn(); give it a width.

Accessibility and motion

Keyboard: Every control is a native element in reading order.
Screen readers: Semantic elements with accessible names; decorative marks are hidden.
Touch: Targets are 36 px or larger; nothing depends on hover.
Reduced motion: Nothing animates on its own.

Edge cases and limits

Long labels truncate by wrapping; keep them short.

Command Menu
Free
A command palette: type to filter, arrows to move, Enter to run, with shortcut hints.
Navigation · CSS
Activity Feed
Free
A list of who did what and when, with initials in the accent.
Data · Server
Area Chart
Free
A smooth area chart in your accent with gridlines, a marked last point and axis labels, in plain SVG.
Data · Server