Sidebar 3 - Collapsible icon railPro
A sidebar that collapses to a narrow icon rail via a header toggle, showing tooltips for each item while collapsed.
About Sidebar 3
A sidebar that collapses to a narrow icon rail via a header toggle, showing tooltips for each item while collapsed.
Sidebar 3 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 126 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
- collapse
- icon-rail
- tooltip
- toggle
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add sidebar-03Dependencies installed automatically: lucide-react, motion.
Uses: tooltip, utils.
Usage
import Sidebar03 from "@/components/blocks/sidebar-03"
export default function Page() {
return <Sidebar03 />
}