feat(Toolbar): new component

[MrKaashee]

🔗 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

I've added a new <Toolbar> component.

📝 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@4382

commit: 7456c37

[ineshbose]

Is this similar to DashboardToolbar?

[MrKaashee]

Is this similar to DashboardToolbar?

It’s similar in purpose but more general. Toolbar is reusable beyond dashboards and includes more functionality like variant support and a title prop. I also plan to extend it further in future updates.

[ineshbose]

Yes I figure the layout is the same, and to be honest I noticed that the DashboardToolbar isn't specific to Dashboard components within a DashboardGroup as it doesn't inject any of the dashboard context (I am using it in my own app outside of Dashboard), therefore I also feel its generic and good to introduce to non-pro * imo *

[MrKaashee]

Agreed — makes sense. This version aims to be more flexible and generic .

[benjamincanac]

Why not take advantage of Reka UI's Toolbar component? 🤔
https://reka-ui.com/docs/components/toolbar

[MrKaashee]

Thanks @benjamincanac! I considered Reka’s Toolbar, but since Nuxt UI already uses a custom one in DashboardToolbar, I followed the same approach.

Reka UI’s Toolbar is quite structured, but I wanted something more flexible.

This version is something I’ve already been using in my projects, so I decided to bring it into Nuxt UI with improvements like slots, variants, and better reusability.

[benjamincanac]

The DashboardToolbar from Nuxt UI Pro is a layout component that is meant to be used under a DashboardNavbar to build a dashboard, basically it's just a div with flex items-center justify-between and some slots. It is different from a functional Toolbar component like https://reka-ui.com/docs/components/toolbar

I guess we can close this if you don't plan to implement it on top of Reka UI? Also, I'd like to implement the Toggle/ToggleGroup components before this one: https://reka-ui.com/docs/components/toggle-group

[kashiarain]

Thanks for the clarification!

No need to close this PR — I will implement the Toolbar on top of Reka UI.
Will update this PR once ready!