Lumni Digital
Component Library
A monochrome, prop-driven set of React components built with Next.js, TypeScript, and Tailwind CSS, standardized for reuse across every future Lumni Digital project.
Form & Inputs
Button
Primary interactive control with variants, sizes, icons, and a loading state.
Build a Button React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Variants: primary, secondary, outline, ghost, destructive. Sizes sm/md/lg. Support left/right icon slots and an isLoading spinner state.UtilityButton
Square icon-only button for toolbars and compact actions.
Build a UtilityButton React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Square icon-only button for toolbars, with size and ghost variants and a required aria-label.SocialButton
Full-width button used to continue an auth flow with a third-party provider.
Build a SocialButton React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Full-width button for OAuth flows, showing a provider icon and label (Google, Apple, GitHub, Facebook).MobileAppStoreButton
Badge-style anchor linking out to a mobile app listing.
Build a MobileAppStoreButton React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Badge-style link to the iOS App Store or Google Play, with a store icon and a two-line label.Input
Base text field with label, hint, error, and icon slots.
Build a Input React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Text field with label, hint text, error message, and optional left/right icon slots.This is how others will see you
Password must be at least 8 characters
SearchInput
Search field with a fixed search icon and a clear button that appears with input.
Build a SearchInput React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Input with a search icon and a clear (X) button that appears once there is a value.VerificationCodeInput
Six-digit OTP entry with focus-advance, backspace, and paste support.
Build a VerificationCodeInput React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Six separate single-digit boxes for an OTP code, with auto-advance focus, backspace handling, and paste support.TextArea
Multi-line field that grows automatically with its content.
Build a TextArea React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Multi-line field with label, hint text, and an optional auto-resize-to-content behavior.Tell us a little about yourself
Checkbox
Custom-styled checkbox with support for a partial, indeterminate state.
Build a Checkbox React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Custom-styled checkbox supporting checked, unchecked, and indeterminate states with a label.RadioButton
Standalone circular radio control sharing the checkbox visual language.
Build a RadioButton React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Standalone circular radio control sharing the checkbox's visual language.RadioGroup
A set of mutually exclusive options composed from RadioButton.
Build a RadioGroup React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). A set of mutually exclusive RadioButton options with a single controlled value.Toggle
Switch-style boolean control with an animated sliding thumb.
Build a Toggle React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Switch-style boolean control with an animated sliding thumb and a label.Slider
Single-handle range slider with a floating value bubble above the thumb.
Build a Slider React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Single-handle range input with a draggable thumb and a floating value bubble above it.Select
Custom dropdown with keyboard navigation and a single selected value.
Build a Select React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Custom dropdown (not the native <select>) with keyboard navigation and a single selected value.SelectWithSearch
Searchable combobox for filtering long option lists.
Build a SelectWithSearch React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Select variant with a search input inside the open dropdown to filter long option lists.MultiSelect
Multiple selection with removable chips rendered in the trigger.
Build a MultiSelect React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Dropdown that supports selecting multiple options, rendered as removable chips in the trigger.DatePicker
Button trigger that opens a calendar popover for picking a single date.
Build a DatePicker React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Button trigger that opens a calendar popover for choosing a single date, with month navigation.ColorPicker
Swatch trigger opening a native color input alongside a hex text field.
Build a ColorPicker React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Swatch trigger opening a popover with a native color input and a hex text field.GradientPicker
Two-stop gradient editor with a live linear-gradient preview.
Build a GradientPicker React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Editor for a two-stop linear gradient (from/to colors plus angle) with a live preview bar.FileUpload
Drag-and-drop dropzone with a fallback click-to-browse file input.
Build a FileUpload React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Drag-and-drop dropzone with a click-to-browse fallback and a list of selected files.Click to upload or drag and drop
Any file type
ImagePicker
Circular or square avatar-style picker with a live image preview.
Build a ImagePicker React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Circular or square avatar-style picker that previews the chosen image file.CreditCardInput
Card number field with automatic 4-digit grouping and a card icon.
Build a CreditCardInput React + TypeScript component for a monochrome design system (Tailwind CSS, 5px border radius, black/white/gray palette only, light and dark mode via "dark:" classes). Text field that auto-formats a card number into 4-digit groups and shows a card icon.