Sidebar 19 - Keyboard shortcut togglePro
An off-canvas sidebar that slides fully away with ⌘B / Ctrl+B or the header button, with shortcut hints next to each item.
About Sidebar 19
An off-canvas sidebar that slides fully away with ⌘B / Ctrl+B or the header button, with shortcut hints next to each item.
Sidebar 19 is a sidebar block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 127 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- sidebar
- keyboard
- shortcut
- toggle
- offcanvas
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add sidebar-19Dependencies installed automatically: lucide-react, motion.
Uses: kbd, utils.
Usage
import Sidebar19 from "@/components/blocks/sidebar-19"
export default function Page() {
return <Sidebar19 />
}