ComponentsBasic Dropdown

Basic Dropdown

An elegant dropdown menu with smooth animations, hover effects, and proper keyboard accessibility for enhanced user interaction.

Select a size

Code

1

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/basic-dropdown.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/basic-dropdown-demo.json"

How to use

Demo.tsx

"use client"

import React from "react"

import BasicDropdown from "@/components/smoothui/ui/BasicDropdown"

const items = [
  { id: 1, label: "Small" },
  { id: 2, label: "Medium" },
  { id: 3, label: "Large" },
  { id: 4, label: "Extra Large" },
]

const DropdownDemo = () => {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4 p-8">
      <h3 className="text-lg font-medium">Select a size</h3>
      <BasicDropdown
        label="Choose a size"
        items={items}
        onChange={(item) => console.log("Selected:", item.label)}
      />
    </div>
  )
}

export default DropdownDemo

Props

PropTypeDescription
labelstringThe label to display on the dropdown button.
items{ id: string | number; label: string; icon?: React.ReactNode }[]Array of dropdown items. Each item: { id, label, icon? }.
Object shape:
FieldTypeDescription
idstring | numberUnique item identifier.
labelstringItem label.
iconReact.ReactNodeOptional icon for the item.
onChange?(item: DropdownItem) => voidCallback fired when an item is selected.
className?stringOptional additional class names for the dropdown container.