Components
Sidebar
SketchSidebar — a hand-drawn navigation sidebar with optional icons and active-item highlighting.
SketchSidebar renders a vertical nav list where the active item gets a rough.js
filled highlight. Each item can carry a named icon or a custom React node, a label,
and an onClick handler.
Default
import { SketchSidebar } from "blackchalk";<SketchSidebaritems={[ { icon: "home", label: "Dashboard", active: true, onClick: () => {} }, { icon: "search", label: "Explore", onClick: () => {} }, { icon: "user", label: "Profile", onClick: () => {} }, { icon: "settings", label: "Settings", onClick: () => {} },]}/>Props
| Prop | Type | Default |
|---|---|---|
items | SketchSidebarItem[] | — |
width | number | 220 |
SketchSidebarItem
| Field | Type | Default |
|---|---|---|
label | string | — |
icon | ReactNode | IconName | — |
active | boolean | — |
onClick | () => void | — |
See it in the Storybook playground, or read the source.