BasicBasic Dropdown

Basic Dropdown

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

Select a size

Code

Install with shadcn

Terminal

npx shadcn@latest add @smoothui/basic-dropdown

Or install the demo

Terminal

npx shadcn@latest add @smoothui/basic-dropdown-demo

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

Prop	Type	Default
label	string	-
items	{ id: string \| number; label: string; icon?: React.ReactNode }[]	-
onChange?	(item: DropdownItem) => void	-
className?	string	-

Basic Toast

A versatile toast notification system with smooth animations for different alert types including success, error, warning, and info messages.

Basic Modal

A polished modal dialog with backdrop blur and dynamic entrance/exit animations that improves user experience for dialog interactions.