CurvedInput

Campo de texto curvado con botón de envío.

Código: RODD·CP·012
Familia: Componentes
Origen: React Bits (David Haz) · Licencia MIT + Commons Clause

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/CurvedInput-TS-TW

Cuándo usarlo

Sustituyen a un componente estándar cuando la experiencia es parte del producto.

Props para personalizarlo

Prop	Tipo	Por defecto
value	string	undefined
defaultValue	string	""
onChange	(value) => void	-
onSubmit	(value) => void	-
placeholder	string	"Enter your email"
buttonText	string	"Get Started"
type	string	"email"
name	string	undefined
ariaLabel	string	undefined
theme	"dark" \| "light"	"dark"
width	number \| string	450
bend	number	28
height	number	64
cornerRadius	number	18
borderWidth	number	1.5
fontSize	number	16
backgroundColor	string	undefined
textColor	string	undefined
placeholderColor	string	undefined
borderColor	string	undefined
buttonColor	string	undefined
buttonTextColor	string	undefined
iconColor	string	undefined
shadowSize	"none" \| "sm" \| "md" \| "lg"	"md"
shadowColor	string	undefined
showButton	boolean	true
showIcon	boolean	true
icon	React.ReactNode	undefined
className	string	""
style	React.CSSProperties	undefined

Otros efectos de componentes

DriftWall — Muro infinito de tarjetas en perspectiva que se elevan al hover.
Folder — Carpeta que se abre para revelar su contenido.
InfiniteSpiral — Hélice 3D infinita de imágenes.
Marquee — Carrusel infinito para logos, opiniones o imágenes.
MorphSlider — Slider WebGL que funde imágenes con una transición líquida.
PixelImage — Imagen que se revela píxel a píxel.