About
A palette where results are split across tabs with a match count on each: you see where to look next before switching. From VibeUI — 1,600+ components with agent-ready install briefs at vibeui.club.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Palette With Tabs to your project and fits it to your theme.
Code
How Palette With Tabs is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Command014 } from "@/components/ui/vibeui-command-014"
export default function Demo() {
return <Command014 {...{"label":"Search with filters","listLabel":"Results","placeholder":"Search the workspace…","emptyText":"Nothing in this tab. Try a neighbouring one — the number next to it says where.","hintText":"↑↓ rows · ←→ tabs · Enter open","doneText":"Opened: {command}","tabs":[{"id":"","label":"All"},{"id":"page","label":"Pages"},{"id":"person","label":"People"},{"id":"file","label":"Files"}],"entries":[{"label":"Release roadmap","type":"page","hint":"Product"},{"label":"On-call policy","type":"page","hint":"Support"},{"label":"Weekly review","type":"page","hint":"Team"},{"label":"Maria Kovaleva","type":"person","hint":"Design"},{"label":"Artem Sokolov","type":"person","hint":"Engineering"},{"label":"budget-2025.xlsx","type":"file","hint":"84 KB"},{"label":"home-mockup.fig","type":"file","hint":"2.3 MB"}],"triggerLabel":"Open palette"}} />
}