Components Copy MarkdownBrowse every shuip component with a live preview.ComponentsConfirmation DialogA standardized way to ask for user confirmation before executing critical actions like deleting data, logging out, or making irreversible changes.Copy ButtonA button that copies text to the clipboard.Hover RevealProvides an elegant way to display additional information on hover, creating a more interactive and informative interface without cluttering the main content.Side DialogA lightweight dialog that opens from the sides of the screen, perfect for notifications, user menus, and contextual actions.Submit ButtonSpecifically designed for form submission with built-in loading states, making it perfect for forms that need to show submission progress and prevent double submissions.Theme ButtonProvides 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.React Hook FormAddress FieldCompound address input with Google Places autocomplete, integrated with React Hook Form via typed lens binding from @hookform/lenses.Autocomplete FieldFree-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 FieldCheckbox component integrated with React Hook Form via typed lens binding from @hookform/lenses. Supports inline clickable labels and Zod refinements for terms acceptance.Date FieldSingle-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 FieldDate range picker integrated with React Hook Form via typed lens binding from @hookform/lenses. Built on the shadcn Calendar primitive in range mode.Datetime FieldSingle date and time picker integrated with React Hook Form via typed lens binding. Stores a single Date carrying day, hours and minutes.Inline Edit FieldA React Hook Form field with click-to-edit, schema validation, and save-on-commit.Input FieldText input component integrated with React Hook Form via typed lens binding from @hookform/lenses. Supports tooltips and InputGroup integration.Month FieldMonth + 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.Number FieldNumeric input component integrated with React Hook Form via typed lens binding from @hookform/lenses. Writes back valueAsNumber, supports range sliders and tooltips.Password FieldPassword input component integrated with React Hook Form via typed lens binding from @hookform/lenses. Includes visibility toggle, optional tooltip, and InputGroup integration.Radio FieldRadio button group component integrated with React Hook Form via typed lens binding from @hookform/lenses. Renders options automatically with consistent layout and accessibility.Select FieldSelect 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.Textarea FieldMulti-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 FieldTime picker (HH:mm) integrated with React Hook Form via typed lens binding from @hookform/lenses. Two shadcn Select inputs for hours and minutes.Time RangeStart/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.TanStack FormAutocomplete FieldFree-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 FieldCheckbox component integrated with TanStack Form via React context for boolean field management.Date FieldSingle-date picker integrated with TanStack Form via React context. Wraps the shadcn Calendar inside a Popover triggered by an outline Button.Date Range FieldDate range picker integrated with TanStack Form via React context. Built on the shadcn Calendar primitive in range mode.Datetime FieldSingle date and time picker integrated with TanStack Form via React context. Stores a single Date carrying day, hours and minutes.Form ContextFoundation contexts and consumer hooks for building type-safe TanStack Form components via createFormHook.Inline Edit FieldA TanStack Form field with click-to-edit, schema validation, and save-on-commit.Input FieldText input component integrated with TanStack Form via React context. Supports tooltips and InputGroup integration for addons and buttons.Month FieldMonth + year picker integrated with TanStack Form via React context. Stores a Date normalized to the first day of the selected month.Password FieldPassword input component with visibility toggle and optional tooltip. Built on shadcn InputGroup for enhanced UI.Radio FieldRadio button group component integrated with TanStack Form via React context. Options are defined as Array<{label, value}>.Select FieldDropdown select component integrated with TanStack Form via React context. Options are defined as Record<string, string> where keys are labels.Submit ButtonForm submission button that automatically manages loading and disabled states based on form validation and submission status.Textarea FieldMulti-line text input component with optional tooltip. Built on shadcn InputGroup for enhanced UI.Time FieldTime picker (HH:mm) integrated with TanStack Form via field context. Two shadcn Select inputs for hours and minutes.Time RangeStart/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.TanStack QueryQuery BoundaryError boundary and suspense wrapper for TanStack Query with automatic error recovery and loading states.llms-full.txtPrevious PageReact Hook FormNext Page