Sidebar 17 - Resizable widthPro
A sidebar with a drag handle on its edge that resizes it with pointer events (and arrow keys), clamped between a minimum and maximum width.
About Sidebar 17
A sidebar with a drag handle on its edge that resizes it with pointer events (and arrow keys), clamped between a minimum and maximum width.
Sidebar 17 is a sidebar block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 138 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
- resizable
- drag
- handle
- pointer
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add sidebar-17Dependencies installed automatically: lucide-react.
Uses: utils.
Usage
import Sidebar17 from "@/components/blocks/sidebar-17"
export default function Page() {
return <Sidebar17 />
}