# shadcn-app-dock
A prop-driven, macOS-style category **dock** for React — magnifying icon bar with an
optional dropdown menu and a built-in **shadcn theme switcher**.
- **Abstracted nav items** — pass your own `icon` / `label` / `onClick` per item.
- **Custom menu** — a trailing dropdown whose body you render yourself.
- **Theme switcher** — drop the exported `` into that dropdown for
light / dark / system + shadcn color themes (with hover preview).
- **Framework-agnostic icons** — defaults to `![]()
`; pass `renderImage` to use
`next/image` or any custom renderer.
## Requirements
Tailwind CSS with the shadcn design tokens (CSS variables like `--card`, `--accent`,
`--primary`). For the color themes, import the stylesheet shipped by
[`shadcn-theme-menu`](https://www.npmjs.com/package/shadcn-theme-menu):
```ts
import "shadcn-theme-menu/themes.css"
```
Wrap your app in `next-themes`' `ThemeProvider` (peer dependency) for the appearance toggle.
## Usage
```tsx
import Image from "next/image"
import { usePathname, useRouter } from "next/navigation"
import {
CategoryDock,
ThemeMenu,
DropdownMenuItem,
DropdownMenuSeparator,
} from "shadcn-app-dock"
const NAV = [
{ href: "/", label: "Research", icon: "/apple-touch-icon.png" },
{ href: "/docs", label: "Docs", icon: "/icons/icon-read.svg" },
]
export function AppDock() {
const pathname = usePathname()
const router = useRouter()
return (
(
)}
items={NAV.map(({ href, label, icon }) => ({
key: href,
label,
icon,
active: pathname === href,
onClick: () => router.push(href),
}))}
menu={{
triggerIcon: "/icons/icon-configure.svg",
triggerLabel: "Settings",
renderContent: ({ side }) => (
<>
router.push("/settings")}>Settings
),
}}
/>
)
}
```
## API
### ``
| Prop | Type | Description |
| --- | --- | --- |
| `items` | `DockNavItem[]` | Nav items. `icon` is an image `src` string or a React node. |
| `menu` | `CategoryDockMenu` | Optional trailing dropdown; `renderContent({ side, close })` returns its body. |
| `renderImage` | `(src, alt, size) => ReactNode` | Renders string icons. Defaults to `![]()
`. |
| `enableKeyboardShortcuts` | `boolean` | `Alt+1..n` triggers the matching item's `onClick`. |
| `placements` | `{ desktop?, mobile? }` | Which fixed placements to render. Defaults to both. |
| `className` | `string` | Extra classes on each placement wrapper. |
### ``
Composable theme switcher (fragment of dropdown items). Props: `showAppearance?` (default
`true`), `defaultColorTheme?` (default `"modern-minimal"`).
### Provider / hooks
`CategoryDockProvider`, `useCategoryDock(currentCategory, onCategoryChange)`,
`useCategoryDockState()`, `useCategoryDockVisibility()` — optional context for sharing dock
visibility and per-page category state.
The shadcn dropdown and dock primitives (`Dock`, `DockItem`, `DropdownMenuItem`, …) are also
re-exported for building custom menu content.