feat(Sidebar): new component

[benjamincanac]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

New standalone Sidebar component. Collapsible, fixed sidebar that pushes page content. On desktop it renders inline with offcanvas, icon, or none collapse modes. On mobile it opens a Modal, Slideover, or Drawer.

Also ships an AI chat panel in the docs site using the new Sidebar, with live theme customization via tool calls.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6038

commit: 585c0ca

[mikenewbon]

@benjamincanac I dont see a thread to comment on - but I see the resize handle in the main docs page example (not working) and is there a reason to use ease-linear instead of in-out?

[benjamincanac]

@mikenewbon Here is fine! It's not a resize handle but a rail you can click on. There is no specific reason for using ease-linear no, I took inspiration from https://ui.shadcn.com/docs/components/radix/sidebar.

[mikenewbon]

@benjamincanac ahh makes sense, I see the cursor difference now. Looking at the other components in Nuxt UI, ease-out feels more natural here. The only places I could find linear easing on an animation or transition across the library are continuous loops (marquee, chat shimmer).

Separately, I was curious whether there's a reason the base Sidebar doesn't support resizable/size props like DashboardSidebar does for completeness, or if there's a longer-term plan to consolidate the two?

[benjamincanac]

@mikenewbon I didn't try to implement it because it added a layer of complexity and in my mind we needed a wrapper component to orchestrate this like we do with DashboardGroup and its injected context but maybe I'm wrong 🤔

[mikenewbon]

@benjamincanac I don't think we need a wrapper component for this, useResizable works standalone with sensible defaults (cookie storage, rem units, per-instance key), so there's nothing to orchestrate. I've opened a quick PR (#6190) to demonstrate. I only suggest this as it would nicely replace custom components in my own projects.

[mtzrmzia]

When will it be available for use? It doesn't appear in version 4.5.1.

[mikenewbon]

When will it be available for use? It doesn't appear in version 4.5.1.

@mtzrmzia the patch version releases are for bugs/security afaik, it should be released in 4.6.0!

[mtzrmzia]

When will it be available for use? It doesn't appear in version 4.5.1.

@mtzrmzia the patch version releases are for bugs/security afaik, it should be released in 4.6.0!

@mikenewbon That makes sense, I hope it doesn't take too long 🤞🏾