Form Components
Every interactive control — styled with glass depth, amber glow focus, and smooth transitions.
The primary call-to-action element. Solid buttons get an amber glow shadow on hover, soft variants use gradient glass backgrounds. Use variant="solid" for primary actions, variant="soft" for secondary.
Variants
Sizes
With Icons
States
Glass-backed text fields with amber focus rings. The muted glass background (bg-white/40 dark:bg-white/[0.03]) lets the layered background show through while maintaining readability.
Multi-line input with the same glass treatment. Perfect for node descriptions, deployment notes, or configuration YAML.
Dropdown with elevated glass panel. The content popup uses backdrop-blur-2xl for that frosted overlay depth.
Binary controls for settings and preferences. Switches animate smoothly, checkboxes get a subtle glass card variant for rich option lists.
Single-choice selection. Use for node size tiers, plan selection, or any mutually exclusive options.
Range input with glass track and amber-glowing thumb on hover. Ideal for resource allocation — CPU cores, memory limits, concurrency.
Phone number input with automatic country-aware formatting via @maskito/phone + libphonenumber-js. Client-only component (uses browser APIs for masking).