A dropdown menu with vertical category tabs on one side and their items on the other, featuring a sliding tab indicator, animated height transitions, and a morphing chevron icon.
import React from "react";
import { CategoryDropdown } from "@/components/ui/category-dropdown";
const categories = [
{
id: "conversation",
label: "Conversation",
items: [
{ id: "message-bubble", label: "Message Bubble" },
{ id: "prompt-input", label: "Prompt Input" },
],
},
{
id: "tools",
label: "Tools & execution",
items: [
{ id: "tool-call", label: "Tool Call" },
{ id: "tool-approval", label: "Tool Approval" },
],
},
];
export default function Example() {
const [value, setValue] = React.useState("prompt-input");
return (
<div className="flex min-h-[320px] w-full items-start justify-center pt-16">
<CategoryDropdown
categories={categories}
value={value}
onValueChange={setValue}
/>
</div>
);
}
Part of Pasta UI — browse the full library on 21st.dev.