jelly input

preview

name

username

usage

Set an optional pastel tint while retaining normal input attributes and ref forwarding.

import { JellyInput } from "@/components/jelly/jelly-input"

export function EmailField() {
  return <JellyInput color="blue" label="email" type="email" placeholder="hello@jelly.ui" />
}

setup notes

Requires React, TypeScript, Tailwind CSS, and the included cn helper. It forwards standard input attributes and refs.

props

prop	type	default	purpose
color	"pink" \| "blue" \| "green" \| "yellow" \| "orange" \| "red" \| "clear"	"clear"	Sets the surface and focus tint.
label	string	-	Renders a linked input label.
placeholder	string	-	Provides placeholder text.
type	HTMLInputTypeAttribute	"text"	Sets the native input type.