Form Inputs & Primitives
The themeable building blocks the pages are made of
Every page in the library is composed from a set of lower-level primitives you can also use directly. They're controlled components with consistent sizing, variants, validation hooks and theming, so a form you build by hand looks and behaves like the generated pages.
All import-and-use from nucleus-core-ts/fe, and they need no extra dependencies — including AbstractAnimatedBackground, which is now a self-contained WebGL fog (the old three / @react-three/fiber requirement was removed). Below they're grouped by what they do.
Text & numeric input#
NucleusTextInput is the workhorse — far more than an <input>. It's typed, self-validating and format-aware.
NucleusTextInputtyped + validatingOptionalA controlled input with a type (text, email, password, number, tel…), built-in validation (enableValidation + validateOnBlur / validateOnChange, a validationConfig or a customValidator, with a validation icon and typewriter error), number formatting (thousandSeparator, unit prefix/suffix), phone formatting (phoneFormat), password strength + confirm value, and preventCopy / preventPaste for sensitive fields. Sizes sm/md/lg, left/right icons, helper + error text.
CheckboxbooleanOptionalA themeable checkbox/toggle for boolean fields, with label and disabled/indeterminate states.
Selection & dates#
Dropdowns and calendars with search, ranges and locale support.
SelectBoxsearchable dropdownOptionalA typed single-select over SelectOption<T> (value, label, icon, disabled). searchable, clearable and loading states, top/bottom/auto positioning, custom renderOption / renderValue, and onSearch for async option loading. Sizes and variants (default / filled / ghost).
DatePickersingle | rangeOptionalA calendar input in single or range mode with locale support, minDate / maxDate, disabledDates / disabledDaysOfWeek, configurable dateFormat and firstDayOfWeek, and clear/today buttons.
RangePickerrangeOptionalA dual-thumb numeric range slider (min/max/step, tooltip, ticks; value { min, max }) for filters and report parameters. For date ranges use DatePicker with mode='range'.
SearchBoxdebounced searchOptionalA search input with the affordances a list/table search expects — clearable, debounced and icon-led — the box that drives useNucleusEntity's search.
Actions, feedback & security#
Buttons, tooltips, the bot-defence widget and the ambient background used on auth pages.
ButtonactionOptionalThe themeable button used across the kit — variants, sizes, loading and disabled states, leading/trailing icons.
TooltipoverlayOptionalA positioned tooltip (placements, triggers, sizes, variants) with its own tooltipTheme — used for help text and truncated content.
Captchabot defenceOptionalThe challenge widget wired to the CAPTCHA_GENERATE action (configurable type and difficulty, with captchaTheme). LoginPage embeds it, but it mounts anywhere you need proof-of-human.
AbstractAnimatedBackgrounddecorationOptionalThe ambient animated FOG backdrop behind the auth pages (toggled by their showBackground prop); usable on its own for hero/empty states. It renders a single-draw-call WebGL fog shader (Vanta-FOG-style) at a capped DPR for 60fps, with NO extra dependencies (the old three / @react-three/fiber requirement is gone). Customize via optional baseColor / lowlightColor / midtoneColor / highlightColor (hex), speed, zoom, blur, maxDpr — defaults preserve the prior look. Respects prefers-reduced-motion, pauses off-screen, and degrades to a CSS gradient without WebGL.
Related sections