Browse components
Curved Input
A text field whose words and underline droop along an arc while idle, then spring flat the moment you focus it.
Installation
npx shadcn@latest add @glint-ui/curved-inputFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/curved-input.json
Usage
import { CurvedInput } from "@/components/ui/curved-input";
<CurvedInput placeholder="Type your name" bend={40} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| width | number | 380 | Width in px. |
| fontSize | number | 30 | Text size in px. |
| bend | number | 40 | Idle sag of the arc in px. Negative arcs upward. |
| placeholder | string | "Type your name" | Placeholder text (also curved). |
| defaultValue | string | "" | Initial text. |
| label | string | "Name" | Accessible label. |
| colorFrom | string | "#a78bfa" | Underline gradient start. |
| colorTo | string | "#22d3ee" | Underline gradient end. |
| onValueChange | ReactNode | — | (value: string) => void. |
| className | string | — | Extra classes for the root element. |