Components
Loading preview...
Here is The Input component
@felipemenezes098
npx shadcn@latest add https://21st.dev/r/felipemenezes098/the-input
import { ChevronDownIcon } from 'lucide-react'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
} from '@/components/ui/input-group'
export default function Input10() {
return (
<InputGroup className="mx-auto max-w-sm hover:border-ring hover:ring-[3px] hover:ring-ring/20 focus-within:border-ring focus-within:ring-[3px] focus-
within:ring-ring/20">
<InputGroupInput
placeholder="Search..."
className="border-0 bg-transparent shadow-none outline-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-offset-0"
/>
<InputGroupAddon
align="inline-end"
className="border-0 bg-transparent"
>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<InputGroupButton variant="ghost" className="text-xs">
Search in
<ChevronDownIcon className="size-3" />
</InputGroupButton>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuGroup>
<DropdownMenuItem>Documentation</DropdownMenuItem>
<DropdownMenuItem>Blog posts</DropdownMenuItem>
<DropdownMenuItem>Changelog</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</InputGroupAddon>
</InputGroup>
)
}