The Item one

Component 16

About

Here is The Item components

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds The Item one to your project and fits it to your theme.

Code

How The Item one is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

   'use client'

   import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
   import { Button } from '@/components/ui/the-item-one'
   import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuSeparator,
     DropdownMenuTrigger,
   } from '@/components/ui/dropdown-menu'
   import { LogOutIcon, SettingsIcon } from 'lucide-react'

   export default function Item20() {
     return (
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant="outline">Account</Button>
         </DropdownMenuTrigger>

         <DropdownMenuContent align="start" className="w-64 p-2">
           <div className="flex items-center gap-3 px-2 py-1.5">
             <Avatar className="size-9 rounded-sm">
               <AvatarImage
                 src="https://cdn.21st.dev/assets/mirror/03/039131cd23196f79dda2cce8c0ed9e6a49832a0d73e33bbcae952cd528fe6b0f.jpg"
                 alt="Sarah Chen"
                 className="object-cover"
               />
               <AvatarFallback className="rounded-sm">SC</AvatarFallback>
             </Avatar>

             <div className="min-w-0">
               <p className="truncate text-sm font-medium leading-none">
                 Sarah Chen
               </p>
               <p className="mt-1 truncate text-sm text-muted-foreground">
                 sarah@example.com
               </p>
             </div>
           </div>

           <DropdownMenuSeparator />

           <DropdownMenuItem className="gap-2">
             <SettingsIcon className="size-4 shrink-0" />
             <span>Settings</span>
           </DropdownMenuItem>

           <DropdownMenuItem className="gap-2">
             <LogOutIcon className="size-4 shrink-0" />
             <span>Log out</span>
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
     )
   }