Components

A standardized way to ask for user confirmation before executing critical actions like deleting data, logging out, or making irreversible changes.

A button that copies text to the clipboard.

Provides an elegant way to display additional information on hover, creating a more interactive and informative interface without cluttering the main content.

A lightweight dialog that opens from the sides of the screen, perfect for notifications, user menus, and contextual actions.

Specifically designed for form submission with built-in loading states, making it perfect for forms that need to show submission progress and prevent double submissions.

Provides an elegant and user-friendly way to cycle through light, dark, and system themes. It's specifically designed to work with next-themes, the most popular theme management library for Next.js applications.

Compound address input with Google Places autocomplete, integrated with React Hook Form via typed lens binding from @hookform/lenses.

Free-text input that suggests matching values from a static list or an async search. The committed value is a plain string — suggestions only propose, they never restrict.

Checkbox component integrated with React Hook Form via typed lens binding from @hookform/lenses. Supports inline clickable labels and Zod refinements for terms acceptance.

Single-date picker integrated with React Hook Form via typed lens binding from @hookform/lenses. Wraps the shadcn Calendar inside a Popover triggered by an outline Button.

Date range picker integrated with React Hook Form via typed lens binding from @hookform/lenses. Built on the shadcn Calendar primitive in range mode.

Single date and time picker integrated with React Hook Form via typed lens binding. Stores a single Date carrying day, hours and minutes.

A React Hook Form field with click-to-edit, schema validation, and save-on-commit.

Text input component integrated with React Hook Form via typed lens binding from @hookform/lenses. Supports tooltips and InputGroup integration.

Month + year picker integrated with React Hook Form via typed lens binding from @hookform/lenses. Stores a Date normalized to the first day of the selected month.

Numeric input component integrated with React Hook Form via typed lens binding from @hookform/lenses. Writes back valueAsNumber, supports range sliders and tooltips.

Password input component integrated with React Hook Form via typed lens binding from @hookform/lenses. Includes visibility toggle, optional tooltip, and InputGroup integration.

Radio button group component integrated with React Hook Form via typed lens binding from @hookform/lenses. Renders options automatically with consistent layout and accessibility.

Select dropdown component integrated with React Hook Form via typed lens binding from @hookform/lenses. Renders options from a key-value map with controlled value handling.

Multi-line text input component integrated with React Hook Form via typed lens binding from @hookform/lenses. Supports tooltips and InputGroup integration for character limits or formatting guidelines.

Time picker (HH:mm) integrated with React Hook Form via typed lens binding from @hookform/lenses. Two shadcn Select inputs for hours and minutes.

Start/end time range (HH:mm) integrated with React Hook Form via typed lens binding. Selecting the start sets the end one hour later and enforces start < end.

Free-text input that suggests matching values from a static list or an async search, integrated with TanStack Form via React context. The committed value is a plain string.

Checkbox component integrated with TanStack Form via React context for boolean field management.

Single-date picker integrated with TanStack Form via React context. Wraps the shadcn Calendar inside a Popover triggered by an outline Button.

Date range picker integrated with TanStack Form via React context. Built on the shadcn Calendar primitive in range mode.

Single date and time picker integrated with TanStack Form via React context. Stores a single Date carrying day, hours and minutes.

Foundation contexts and consumer hooks for building type-safe TanStack Form components via createFormHook.

A TanStack Form field with click-to-edit, schema validation, and save-on-commit.

Text input component integrated with TanStack Form via React context. Supports tooltips and InputGroup integration for addons and buttons.

Month + year picker integrated with TanStack Form via React context. Stores a Date normalized to the first day of the selected month.

Password input component with visibility toggle and optional tooltip. Built on shadcn InputGroup for enhanced UI.

Radio button group component integrated with TanStack Form via React context. Options are defined as Array<{label, value}>.

Dropdown select component integrated with TanStack Form via React context. Options are defined as Record<string, string> where keys are labels.

Form submission button that automatically manages loading and disabled states based on form validation and submission status.

Multi-line text input component with optional tooltip. Built on shadcn InputGroup for enhanced UI.

Time picker (HH:mm) integrated with TanStack Form via field context. Two shadcn Select inputs for hours and minutes.

Start/end time range (HH:mm) integrated with TanStack Form via field context. Selecting the start sets the end one hour later and enforces start < end.

Error boundary and suspense wrapper for TanStack Query with automatic error recovery and loading states.