Aurora Shimmer
Buttons
Prism Input Suite
A floating-label form set with luminous focus rings and cursor trails.
Customize
ADVERT
Overview
Prism Input Suite delivers a premium form layout with floating labels, animated focus rings, and a soft light-trail cursor effect. It includes text inputs, a select, and a textarea with validation-ready states so you can build elegant onboarding, contact, or checkout flows that feel modern and tactile.
Props
Use the props below to customise the prism input suite in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | No | "Prism input suite" | Headline text shown above the form stack. |
| accentText | string | No | "Floating labels, luminous focus rings, and live validation states." | Supporting line beneath the title, useful for short form context. |
| fields | { id: string; label: string; type: string; placeholder?: string; helperText?: string; message?: string; options?: { value: string; label: string }[]; defaultValue?: string | number | boolean | string[]; state?: 'default' | 'success' | 'error'; min?: number; max?: number; step?: number; accept?: string }[] | No | [{ id: "full-name", label: "Full name", type: "text", placeholder: "Ava Kline" }] | Field definitions used to render text, select, textarea, password, tel, number, date, time, range, checkbox, radio, toggle, and file inputs with validation states. |
| primaryLabel | string | No | "Start trial" | Label for the primary action button. |
| secondaryLabel | string | No | "View docs" | Label for the secondary action button. |
| colors | string[] | No | ["#020617", "#38bdf8", "#a855f7"] | Array of up to three hex colors used for the background and glow accents. |
| intensity | number | No | 0.9 | Overall glow strength for the background and focus rings. |
| tilt | number | No | 1 | How much the form panel tilts in 3D as you move the pointer. |
| parallax | number | No | 1 | How far the cursor glow shifts as you move the pointer across the form. |
| minHeight | number | string | No | 520 | Minimum height for the component container. Accepts a number (pixels) or any valid CSS height string. |
| className | string | No | undefined | Optional custom class name merged onto the root container for layout tweaks. |
Related React components
More components from the same category or sharing similar tags.
