Components
Loading preview...
Here is The Input component
@felipemenezes098
npx shadcn@latest add https://21st.dev/r/felipemenezes098/the-input import { ArrowUpIcon, PlusIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { ButtonGroup } from '@/components/ui/button-group'
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
} from '@/components/ui/input-group'
export default function Input17() {
return (
<ButtonGroup className="mx-auto flex max-w-md">
<Button
variant="outline"
size="icon"
aria-label="Add attachment"
className="h-9 w-9 shrink-0"
>
<PlusIcon className="size-4" />
</Button>
<InputGroup className="h-9 min-w-0 flex-1 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="Send a message..."
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"
>
<InputGroupButton aria-label="Send message" size="icon-xs">
<ArrowUpIcon />
</InputGroupButton>
</InputGroupAddon>
</InputGroup>
</ButtonGroup>
)
}