Shadcn Resize Sidebar

Advanced Resizable Sidebar Component for Next.js & shadcn/ui

Upgrade your Next.js applications with this extended shadcn/ui resizable sidebar. It delivers sophisticated drag-to-resize functionality, seamless collapse/expand animations, and state persistence using cookies. Crafted for developers, it emulates the intuitive sidebar behavior found in VS Code, ensuring a smooth user experience. It accommodates theme variations, offers keyboard navigation, and provides extensive customization for width, collapse points, and resize orientation, making it a flexible component for contemporary web designs.

Features:

• Extended shadcn-ui Functionality: Enhances the core shadcn-ui sidebar component.
• Drag-to-Resize Width: Users can interactively adjust the sidebar's width by dragging.
• Smooth Collapse/Expand: Features fluid animations for collapsing and expanding the sidebar.
• Theme Compatibility: Supports both light and dark interface modes.
• Keyboard Accessibility: Includes keyboard shortcuts for easier navigation and control.
• Persistent State Management: Utilizes cookies to remember sidebar width and its open/closed state.
• VS Code-Inspired Continuous Drag: Allows continuous dragging to collapse or expand, similar to VS Code.
• Adjustable Auto-Collapse Threshold: Users can define how far to drag before the sidebar auto-collapses.
• Automatic Expansion: Sidebar can auto-expand when dragged from a collapsed state in the opposite direction.
• Configurable Width Limits: Set custom minimum and maximum widths for resizing.
• Directional Resizing Support: Adapts resizing behavior for both left and right-positioned sidebars.
• Next.js 15 & React 19 Compatibility: Developed for modern Next.js and React versions.
• Tailwind v4 Styling: Styled using the Tailwind CSS v4 framework.
• TypeScript Integration: Built with TypeScript for improved code quality and maintainability.

Summary:

This component offers a highly adaptable and feature-packed resizable sidebar for Next.js projects utilizing shadcn/ui. It improves user interaction with advanced resizing features like VS Code-style dragging, automatic collapse/expand mechanisms, and persistent state. Developers can seamlessly integrate and customize it for sidebars on either side, establish resize boundaries, and benefit from theme support, delivering a strong solution for modern application layouts.