Loomora

Core concepts

How to use

Loomora works out of the box. Add LoomoraProvider when you want to change defaults for your whole app, or for just part of it.

1. Wrap your app with LoomoraProvider

The provider merges the config you pass over the built-in defaults. You only write the values you want to change; everything else keeps its default.

import 'loomora/dist/index.css' // not needed in a Tailwind project that scans loomora
import type { ReactNode } from 'react'
import { LoomoraProvider } from 'loomora'

export function Providers({ children }: { children: ReactNode }) {
  return (
    <LoomoraProvider
      config={{
        button: { defaultColor: 'success', defaultLoadingTitle: 'Please wait' },
        settings: { isRtl: false, locale: 'en' },
      }}
    >
      {children}
    </LoomoraProvider>
  )
}

2. Override per subtree

Providers can be nested. A nested provider starts from its parent's resolved configuration and only replaces the keys it sets.

<LoomoraProvider config={{ button: { defaultColor: 'success' } }}>
  {/* every Button here defaults to "success" */}

  <LoomoraProvider config={{ button: { defaultColor: 'error' } }}>
    {/* this subtree defaults to "error"; every other default is inherited from the parent */}
  </LoomoraProvider>
</LoomoraProvider>

The provider is optional

import { Button, TextField } from 'loomora'

// Works without LoomoraProvider: components read the built-in defaults.
export function Example() {
  return <Button title="Save" />
}

Good to know

  • LoomoraProvider includes both ResponsiveProvider and ThemeProvider, and reads localized labels from config.translations.
  • Configuration is merged recursively, so changing form.textField.className never removes other form defaults.
  • Each component page links to the configuration sections that affect it, so you can jump straight to the relevant rows below.

Configuration reference

Every key you can pass to config, with its type and default value. This table is generated from the library defaults (248 entries), so it always matches the version in this repository.

General

Top-level options that affect several components.

PathTypeDefaultDescription
hasTranslationStrategybooleanfalseWhen true, translation strings are returned untouched and `{variable}` interpolation is left to your own i18n layer.
flagResourcestring"https://flagcdn.com/{key}.svg"URL template used by Flag. `{key}` is replaced by the country key.
LinkTypestring"a"Element or component used to render links (Button with `href`, Copyrights). Pass your router link, e.g. next/link.

translations.socials

Display names and input placeholders for every supported social platform.

PathTypeDefaultDescription
translations.socials.behance.namestring"Behance"—
translations.socials.behance.placeholderstring"ex: username"—
translations.socials.discord.namestring"Discord"—
translations.socials.discord.placeholderstring"ex: username"—
translations.socials.dribbble.namestring"Dribbble"—
translations.socials.dribbble.placeholderstring"ex: username"—
translations.socials.facebook.namestring"Facebook"—
translations.socials.facebook.placeholderstring"ex: username"—
translations.socials.github.namestring"GitHub"—
translations.socials.github.placeholderstring"ex: username"—
translations.socials.instagram.namestring"Instagram"—
translations.socials.instagram.placeholderstring"ex: username"—
translations.socials.linkedin.namestring"LinkedIn"—
translations.socials.linkedin.placeholderstring"ex: username"—
translations.socials.pinterest.namestring"Pinterest"—
translations.socials.pinterest.placeholderstring"ex: username"—
translations.socials.snapchat.namestring"Snapchat"—
translations.socials.snapchat.placeholderstring"ex: username"—
translations.socials.spotify.namestring"Spotify"—
translations.socials.spotify.placeholderstring"ex: username"—
translations.socials.telegram.namestring"Telegram"—
translations.socials.telegram.placeholderstring"ex: username"—
translations.socials.threads.namestring"Threads"—
translations.socials.threads.placeholderstring"ex: username"—
translations.socials.tiktok.namestring"TikTok"—
translations.socials.tiktok.placeholderstring"ex: username"—
translations.socials.wechat.namestring"WeChat"—
translations.socials.wechat.placeholderstring"ex: 123456789"—
translations.socials.whatsapp.namestring"WhatsApp"—
translations.socials.whatsapp.placeholderstring"ex: 123456789"—
translations.socials.x.namestring"X (Twitter)"—
translations.socials.x.placeholderstring"ex: username"—
translations.socials.youtube.namestring"YouTube"—
translations.socials.youtube.placeholderstring"ex: channel name"—

translations.countries

Country names used by country pickers, phone inputs and country hooks.

PathTypeDefaultDescription
translations.countriesobject{ 239 entries }
Show full value
{
  "AF": {
    "name": "Afghanistan"
  },
  "AL": {
    "name": "Albania"
  },
  "DZ": {
    "name": "Algeria"
  },
  "AS": {
    "name": "American Samoa"
  },
  "AD": {
    "name": "Andorra"
  },
  "AO": {
    "name": "Angola"
  },
  "AI": {
    "name": "Anguilla"
  },
  "AQ": {
    "name": "Antarctica"
  },
  "AR": {
    "name": "Argentina"
  },
  "AM": {
    "name": "Armenia"
  },
  "AW": {
    "name": "Aruba"
  },
  "AU": {
    "name": "Australia"
  },
  "AT": {
    "name": "Austria"
  },
  "AZ": {
    "name": "Azerbaijan"
  },
  "BS": {
    "name": "Bahamas"
  },
  "BH": {
    "name": "Bahrain"
  },
  "BD": {
    "name": "Bangladesh"
  },
  "BB": {
    "name": "Barbados"
  },
  "BY": {
    "name": "Belarus"
  },
  "BE": {
    "name": "Belgium"
  },
  "BZ": {
    "name": "Belize"
  },
  "BJ": {
    "name": "Benin"
  },
  "BM": {
    "name": "Bermuda"
  },
  "BT": {
    "name": "Bhutan"
  },
  "BO": {
    "name": "Bolivia"
  },
  "BA": {
    "name": "Bosnia and Herzegovina"
  },
  "BW": {
    "name": "Botswana"
  },
  "BR": {
    "name": "Brazil"
  },
  "IO": {
    "name": "British Indian Ocean Territory"
  },
  "VG": {
    "name": "British Virgin Islands"
  },
  "BN": {
    "name": "Brunei Darussalam"
  },
  "BG": {
    "name": "Bulgaria"
  },
  "BF": {
    "name": "Burkina Faso"
  },
  "BI": {
    "name": "Burundi"
  },
  "KH": {
    "name": "Cambodia"
  },
  "CM": {
    "name": "Cameroon"
  },
  "CA": {
    "name": "Canada"
  },
  "CV": {
    "name": "Cape Verde"
  },
  "KY": {
    "name": "Cayman Islands"
  },
  "CF": {
    "name": "Central African Republic"
  },
  "TD": {
    "name": "Chad"
  },
  "CL": {
    "name": "Chile"
  },
  "CN": {
    "name": "China"
  },
  "CX": {
    "name": "Christmas Island"
  },
  "CC": {
    "name": "Cocos (Keeling) Islands"
  },
  "CO": {
    "name": "Colombia"
  },
  "KM": {
    "name": "Comoros"
  },
  "CG": {
    "name": "Congo"
  },
  "CD": {
    "name": "Congo (Democratic Republic)"
  },
  "CK": {
    "name": "Cook Islands"
  },
  "CR": {
    "name": "Costa Rica"
  },
  "CI": {
    "name": "Cote-d-Ivoire"
  },
  "HR": {
    "name": "Croatia"
  },
  "CU": {
    "name": "Cuba"
  },
  "CW": {
    "name": "Curaçao"
  },
  "CY": {
    "name": "Cyprus"
  },
  "CZ": {
    "name": "Czech Republic"
  },
  "DK": {
    "name": "Denmark"
  },
  "DJ": {
    "name": "Djibouti"
  },
  "DM": {
    "name": "Dominica"
  },
  "DO": {
    "name": "Dominican Republic"
  },
  "EC": {
    "name": "Ecuador"
  },
  "EG": {
    "name": "Egypt"
  },
  "SV": {
    "name": "El Salvador"
  },
  "GQ": {
    "name": "Equatorial Guinea"
  },
  "ER": {
    "name": "Eritrea"
  },
  "EE": {
    "name": "Estonia"
  },
  "SZ": {
    "name": "Eswatini"
  },
  "ET": {
    "name": "Ethiopia"
  },
  "FK": {
    "name": "Falkland Islands"
  },
  "FO": {
    "name": "Faroe Islands"
  },
  "FJ": {
    "name": "Fiji"
  },
  "FI": {
    "name": "Finland"
  },
  "FR": {
    "name": "France"
  },
  "GF": {
    "name": "French Guiana"
  },
  "PF": {
    "name": "French Polynesia"
  },
  "GA": {
    "name": "Gabon"
  },
  "GM": {
    "name": "Gambia"
  },
  "GE": {
    "name": "Georgia"
  },
  "DE": {
    "name": "Germany"
  },
  "GH": {
    "name": "Ghana"
  },
  "GI": {
    "name": "Gibraltar"
  },
  "GR": {
    "name": "Greece"
  },
  "GL": {
    "name": "Greenland"
  },
  "GD": {
    "name": "Grenada"
  },
  "GP": {
    "name": "Guadeloupe"
  },
  "GU": {
    "name": "Guam"
  },
  "GG": {
    "name": "Guernsey"
  },
  "GT": {
    "name": "Guatemala"
  },
  "GN": {
    "name": "Guinea"
  },
  "GW": {
    "name": "Guinea-Bissau"
  },
  "GY": {
    "name": "Guyana"
  },
  "HT": {
    "name": "Haiti"
  },
  "HM": {
    "name": "Heard Island and McDonald Islands"
  },
  "VA": {
    "name": "Holy See"
  },
  "HN": {
    "name": "Honduras"
  },
  "HK": {
    "name": "Hong Kong"
  },
  "HU": {
    "name": "Hungary"
  },
  "IS": {
    "name": "Iceland"
  },
  "IM": {
    "name": "Isle of Man"
  },
  "IN": {
    "name": "India"
  },
  "…
—

translations.timezones

Timezone display names.

PathTypeDefaultDescription
translations.timezonesobject{ 105 entries }
Show full value
{
  "regions": {
    "africa": "Africa",
    "america": "America",
    "asia": "Asia",
    "australia": "Australia",
    "europe": "Europe",
    "pacific": "Pacific",
    "atlantic": "Atlantic",
    "indian": "Indian"
  },
  "africa/cairo": "Cairo",
  "africa/casablanca": "Casablanca",
  "africa/johannesburg": "Johannesburg",
  "africa/lagos": "Lagos",
  "africa/nairobi": "Nairobi",
  "america/new_york": "New York",
  "america/chicago": "Chicago",
  "america/denver": "Denver",
  "america/los_angeles": "Los Angeles",
  "america/anchorage": "Anchorage",
  "america/honolulu": "Honolulu",
  "america/sao_paulo": "Sao Paulo",
  "america/argentina/buenos_aires": "Buenos Aires",
  "america/mexico_city": "Mexico City",
  "america/toronto": "Toronto",
  "america/caracas": "Caracas",
  "america/st_johns": "St. John's",
  "asia/singapore": "Singapore",
  "asia/kuala_lumpur": "Kuala Lumpur",
  "asia/bangkok": "Bangkok",
  "asia/jakarta": "Jakarta",
  "asia/manila": "Manila",
  "asia/hong_kong": "Hong Kong",
  "asia/shanghai": "Shanghai",
  "asia/tokyo": "Tokyo",
  "asia/seoul": "Seoul",
  "asia/pyongyang": "Pyongyang",
  "asia/kolkata": "Kolkata",
  "asia/dhaka": "Dhaka",
  "asia/karachi": "Karachi",
  "asia/kabul": "Kabul",
  "asia/dubai": "Dubai",
  "asia/tehran": "Tehran",
  "asia/riyadh": "Riyadh",
  "asia/damascus": "Damascus",
  "asia/kathmandu": "Kathmandu",
  "asia/yangon": "Yangon",
  "asia/almaty": "Almaty",
  "asia/tashkent": "Tashkent",
  "asia/baku": "Baku",
  "asia/yerevan": "Yerevan",
  "asia/tbilisi": "Tbilisi",
  "australia/sydney": "Sydney",
  "australia/melbourne": "Melbourne",
  "australia/brisbane": "Brisbane",
  "australia/perth": "Perth",
  "australia/adelaide": "Adelaide",
  "australia/darwin": "Darwin",
  "australia/eucla": "Eucla",
  "australia/lord_howe": "Lord Howe",
  "europe/london": "London",
  "europe/paris": "Paris",
  "europe/berlin": "Berlin",
  "europe/rome": "Rome",
  "europe/madrid": "Madrid",
  "europe/amsterdam": "Amsterdam",
  "europe/brussels": "Brussels",
  "europe/zurich": "Zurich",
  "europe/vienna": "Vienna",
  "europe/prague": "Prague",
  "europe/warsaw": "Warsaw",
  "europe/stockholm": "Stockholm",
  "europe/oslo": "Oslo",
  "europe/helsinki": "Helsinki",
  "europe/athens": "Athens",
  "europe/bucharest": "Bucharest",
  "europe/istanbul": "Istanbul",
  "europe/moscow": "Moscow",
  "europe/kiev": "Kiev",
  "europe/minsk": "Minsk",
  "europe/dublin": "Dublin",
  "europe/lisbon": "Lisbon",
  "europe/reykjavik": "Reykjavik",
  "pacific/auckland": "Auckland",
  "pacific/fiji": "Fiji",
  "pacific/tahiti": "Tahiti",
  "pacific/marquesas": "Marquesas",
  "pacific/gambier": "Gambier",
  "pacific/easter": "Easter",
  "pacific/galapagos": "Galapagos",
  "pacific/guadalcanal": "Guadalcanal",
  "pacific/noumea": "Noumea",
  "pacific/port_moresby": "Port Moresby",
  "pacific/guam": "Guam",
  "pacific/saipan": "Saipan",
  "pacific/palau": "Palau",
  "pacific/chatham": "Chatham",
  "pacific/kiritimati": "Kiritimati",
  "pacific/apia": "Apia",
  "pacific/tongatapu": "Tongatapu",
  "atlantic/azores": "Azores",
  "atlantic/cape_verde": "Cape Verde",
  "atlantic/canary": "Canary",
  "atlantic/reykjavik": "Reykjavik",
  "atlantic/south_georgia": "South Georgia",
  "indian/maldives": "Maldives",
  "indian/mauritius": "Mauritius",
  "indian/reunion": "Reunion",
  "indian/seychelles": "Seychelles",
  "indian/comoro": "Comoro",
  "indian/madagascar": "Madagascar",
  "indian/mayotte": "Mayotte",
  "indian/cocos": "Cocos",
  "indian/christmas": "Christmas"
}
—

translations.dates

Month / weekday names used by the date hooks.

PathTypeDefaultDescription
translations.datesobject{ 26 entries }
Show full value
{
  "months": {
    "JAN": {
      "name": "January",
      "shortName": "Jan"
    },
    "FEB": {
      "name": "February",
      "shortName": "Feb"
    },
    "MAR": {
      "name": "March",
      "shortName": "Mar"
    },
    "APR": {
      "name": "April",
      "shortName": "Apr"
    },
    "MAY": {
      "name": "May",
      "shortName": "May"
    },
    "JUN": {
      "name": "June",
      "shortName": "Jun"
    },
    "JUL": {
      "name": "July",
      "shortName": "Jul"
    },
    "AUG": {
      "name": "August",
      "shortName": "Aug"
    },
    "SEP": {
      "name": "September",
      "shortName": "Sep"
    },
    "OCT": {
      "name": "October",
      "shortName": "Oct"
    },
    "NOV": {
      "name": "November",
      "shortName": "Nov"
    },
    "DEC": {
      "name": "December",
      "shortName": "Dec"
    }
  },
  "justNow": "just now",
  "fewSecondsAgo": "a few seconds ago",
  "inFewSeconds": "in a few seconds",
  "secondsAgo": "{count} seconds ago",
  "inSeconds": "in {count} seconds",
  "minuteAgo": "a minute ago",
  "minutesAgo": "{count} minutes ago",
  "inMinute": "in a minute",
  "inMinutes": "in {count} minutes",
  "hourAgo": "an hour ago",
  "hoursAgo": "{count} hours ago",
  "inHour": "in an hour",
  "inHours": "in {count} hours",
  "yesterday": "yesterday",
  "daysAgo": "{count} days ago",
  "tomorrow": "tomorrow",
  "inDays": "in {count} days",
  "monthAgo": "a month ago",
  "monthsAgo": "{count} months ago",
  "inMonth": "in a month",
  "inMonths": "in {count} months",
  "yearAgo": "a year ago",
  "yearsAgo": "{count} years ago",
  "inYear": "in a year",
  "inYears": "in {count} years"
}
—

translations.form

Generic form strings (validation, actions, empty states).

PathTypeDefaultDescription
translations.form.dialogTitlestring"Form"—
translations.form.dialogCloseTitlestring"Close"—

translations.textEditorField

Menu titles shown by the rich-text editor.

PathTypeDefaultDescription
translations.textEditorField.menusViewstring"View"—
translations.textEditorField.menusEditstring"Edit"—
translations.textEditorField.menusFormatstring"Format"—
translations.textEditorField.menusInsertstring"Insert"—

translations.searchField

Strings used by SearchField.

PathTypeDefaultDescription
translations.searchField.clearSearchTitlestring"Clear"—
translations.searchField.searchButtonTitlestring"Search"—

translations.passwordField

Strings used by PasswordField (rules, strength labels, actions).

PathTypeDefaultDescription
translations.passwordField.placeholderstring"e.g.: ********"—
translations.passwordField.confirmMatchstring"Match"—
translations.passwordField.confirmMismatchstring"Mismatch"—
translations.passwordField.copyTooltipstring"Copy {password} to clipboard"—
translations.passwordField.generatestring"Generate {length}bit {password}"—
translations.passwordField.hideTooltipstring"Hide {password}"—
translations.passwordField.labelstring"{password}"—
translations.passwordField.missingstring"Please enter a password."—
translations.passwordField.missingButtonstring"Enter a password"—
translations.passwordField.showTooltipstring"Show {password}"—
translations.passwordField.validation.weakstring"Weak"—
translations.passwordField.validation.mediumstring"Medium"—
translations.passwordField.validation.strongstring"Strong"—
translations.passwordField.validation.minLength.shortstring"{length}+ letter(s) long"—
translations.passwordField.validation.minLength.longstring"At least {maxLength}+ letter(s) long"—
translations.passwordField.validation.lowercase.shortstring"{lowercaseLength}+ Lowercase letter(s) long"—
translations.passwordField.validation.lowercase.longstring"At least {lowercaseLength}+ Lowercase letter(s) long"—
translations.passwordField.validation.uppercase.shortstring"{uppercaseLength}+ Uppercase letter(s) long"—
translations.passwordField.validation.uppercase.longstring"At least {uppercaseLength}+ Uppercase letter(s) long"—
translations.passwordField.validation.number.shortstring"{numbersLength}+ Number(s) long"—
translations.passwordField.validation.number.longstring"At least {numbersLength}+ Number(s) long"—
translations.passwordField.validation.special.shortstring"{specialCharsLength}+ special character(s) long"—
translations.passwordField.validation.special.longstring"At least {specialCharsLength}+ special character(s) long"—

translations.phoneField

Strings used by PhoneInput.

PathTypeDefaultDescription
translations.phoneField.startPlaceholderstring"[{start}]XXXXXXXXX"—
translations.phoneField.startPlaceholderOnestring"{start}XXXXXXXXX"—
translations.phoneField.defaultTitlestring"Country"—
translations.phoneField.startErrorstring"Phone number must start with one of [{start}] for {country}"—

translations.autoCompleteField

Strings used by AutocompleteField.

PathTypeDefaultDescription
translations.autoCompleteField.loadingStatestring"Loading options..."—
translations.autoCompleteField.emptyStatestring"No options available"—
translations.autoCompleteField.searchPlaceholderstring"Search..."—
translations.autoCompleteField.selectedCountstring"{count} selected"—

translations.uploaderField

Strings used by UploaderField.

PathTypeDefaultDescription
translations.uploaderField.allCatAcceptedstring"All {cat} file(s) allowed"—
translations.uploaderField.extsAcceptedstring"Only {exts} files allowed"—
translations.uploaderField.duplicateFileRulestring"File/Files already uploaded"—
translations.uploaderField.maxFilesRulestring"Max of {max} file(s) allowed"—
translations.uploaderField.maxFilesSizeRulestring"Max total size of {max} allowed"—
translations.uploaderField.maxSizeRulestring"Max size of {max} allowed"—
translations.uploaderField.minFilesRulestring"Min of {min} file(s) required"—
translations.uploaderField.minFilesSizeRulestring"Min total size of {min} required"—
translations.uploaderField.minSizeRulestring"Min size of {min} required"—
translations.uploaderField.uploadErrorstring"Failed to upload, Please try again"—
translations.uploaderField.acceptRulestring"Only {rules} files allowed"—
translations.uploaderField.dialogTitlestring"Manage Uploaded file(s)"—
translations.uploaderField.dropFilesHere.titlestring"Drop Files Here"—
translations.uploaderField.dropFilesHere.descriptionstring"Drop your file(s) here to upload"—
translations.uploaderField.actions.removeFilestring"Remove file"—
translations.uploaderField.actions.updatestring"Update file"—
translations.uploaderField.actions.viewstring"View file"—
translations.uploaderField.item.idstring"ID: {id}"—
translations.uploaderField.item.numberstring"Item {number}"—
translations.uploaderField.item.sizestring"Size: {size}"—
translations.uploaderField.item.extstring"Extension: {ext}"—
translations.uploaderField.placeholderstring""—
translations.uploaderField.pasteAndDragAndDropSupportRulestring"You can (hover & paste) or (drag & drop) files here"—
translations.uploaderField.pasteSupportRulestring"Hover & paste files here"—
translations.uploaderField.dragAndDropSupportRulestring"Drag and drop files here"—

translations.dateField

Strings used by DateField (labels, presets, weekday names, AM/PM).

PathTypeDefaultDescription
translations.dateFieldobject{ 27 entries }
Show full value
{
  "selectDate": "Select date",
  "selectTime": "Select time",
  "selectRange": "Select date range",
  "startDate": "Start date",
  "endDate": "End date",
  "startTime": "Start time",
  "endTime": "End time",
  "today": "Today",
  "yesterday": "Yesterday",
  "tomorrow": "Tomorrow",
  "thisWeek": "This week",
  "last7Days": "Last 7 days",
  "last30Days": "Last 30 days",
  "thisMonth": "This month",
  "lastMonth": "Last month",
  "thisYear": "This year",
  "now": "Now",
  "apply": "Apply",
  "cancel": "Cancel",
  "clear": "Clear",
  "hours": "Hours",
  "minutes": "Minutes",
  "seconds": "Seconds",
  "am": "AM",
  "pm": "PM",
  "weekDays": {
    "sun": "Sunday",
    "mon": "Monday",
    "tue": "Tuesday",
    "wed": "Wednesday",
    "thu": "Thursday",
    "fri": "Friday",
    "sat": "Saturday"
  },
  "shortWeekDays": {
    "sun": "Sun",
    "mon": "Mon",
    "tue": "Tue",
    "wed": "Wed",
    "thu": "Thu",
    "fri": "Fri",
    "sat": "Sat"
  }
}
—

translations.settings

Strings used by the theme settings UI.

PathTypeDefaultDescription
translations.settings.darkModestring"Dark Mode"—
translations.settings.darkModeEndTimestring"Dark Mode End Time"—
translations.settings.darkModeStartTimestring"Dark Mode Start Time"—
translations.settings.dynamicModestring"Dynamic Mode"—
translations.settings.dynamicModeDescriptionstring"Dynamic Mode auto-switches between Light and Dark based on time. Set start and end times …—
translations.settings.lightModestring"Light Mode"—
translations.settings.systemDetectionstring"System Detection"—
translations.settings.systemDetectionDescriptionstring"System Detection mode follows your device settings and auto-switches between Light and Da…—

dates

Options for the date-related hooks (currently no defaults).

PathTypeDefaultDescription
datesobject{}—

button

Defaults for every Button: type, color, loading title and the Tailwind class sets per variant, size and corner.

PathTypeDefaultDescription
button.defaultTypestring"button"HTML `type` of non-link buttons when no `type` prop is passed.
button.defaultColorstring"info"Color key used when a Button has no `color` prop. Must exist in `button.colors`.
button.defaultLoadingTitlestring"Loading"Text shown instead of the title while `loading` is true.
button.colorsobject{ 3 entries }
Show full value
{
  "fill": {
    "success": {
      "background": "bg-success",
      "border": "border-success",
      "text": "text-white"
    },
    "error": {
      "background": "bg-error",
      "border": "border-error",
      "text": "text-white"
    },
    "warning": {
      "background": "bg-warning",
      "border": "border-warning",
      "text": "text-white"
    },
    "info": {
      "background": "bg-info",
      "border": "border-info",
      "text": "text-white"
    }
  },
  "outline": {
    "success": {
      "border": "border-success",
      "text": "text-success"
    },
    "error": {
      "border": "border-error",
      "text": "text-error"
    },
    "warning": {
      "border": "border-warning",
      "text": "text-warning"
    },
    "info": {
      "border": "border-info",
      "text": "text-info"
    }
  },
  "text": {
    "success": {
      "text": "text-success"
    },
    "error": {
      "text": "text-error"
    },
    "warning": {
      "text": "text-warning"
    },
    "info": {
      "text": "text-info"
    }
  }
}
Class names per variant (fill / outline / text) and color key: `background`, `border`, `text`.
button.cornersobject{ 6 entries }
Show full value
{
  "small": [
    "rounded"
  ],
  "default": [
    "rounded-md"
  ],
  "large": [
    "rounded-xl"
  ],
  "circle": [
    "rounded-full"
  ],
  "sharp": [
    "rounded-none"
  ],
  "full": [
    "rounded-full"
  ]
}
Class names per `corner` value.
button.sizesobject{ 7 entries }
Show full value
{
  "tiny": {
    "fill": {
      "textSize": [
        "text-sm"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-1"
      ],
      "padding": [
        "px-2",
        "py-1"
      ]
    },
    "text": {
      "textSize": [
        "text-base"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-1"
      ],
      "padding": [
        "px-2",
        "py-1"
      ]
    },
    "outline": {
      "textSize": [
        "text-sm"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-1"
      ],
      "padding": [
        "px-2",
        "py-1"
      ]
    }
  },
  "small": {
    "fill": {
      "textSize": [
        "text-sm"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-1"
      ],
      "padding": [
        "px-3",
        "py-2"
      ]
    },
    "text": {
      "textSize": [
        "text-base"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-1"
      ],
      "padding": [
        "px-3",
        "py-2"
      ]
    },
    "outline": {
      "textSize": [
        "text-sm"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-1"
      ],
      "padding": [
        "px-3",
        "py-2"
      ]
    }
  },
  "default": {
    "fill": {
      "textSize": [
        "text-lg"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-2"
      ],
      "padding": [
        "px-3",
        "py-2"
      ]
    },
    "text": {
      "textSize": [
        "text-lg"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-2"
      ],
      "padding": [
        "px-3",
        "py-2"
      ]
    },
    "outline": {
      "textSize": [
        "text-lg"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-2"
      ],
      "padding": [
        "px-3",
        "py-2"
      ]
    }
  },
  "large": {
    "fill": {
      "textSize": [
        "text-xl"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-3"
      ],
      "padding": [
        "p-3"
      ]
    },
    "text": {
      "textSize": [
        "text-xl"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-3"
      ],
      "padding": [
        "p-3"
      ]
    },
    "outline": {
      "textSize": [
        "text-xl"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-3"
      ],
      "padding": [
        "p-3"
      ]
    }
  },
  "larger": {
    "fill": {
      "textSize": [
        "text-xl"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-4"
      ],
      "padding": [
        "p-4"
      ]
    },
    "text": {
      "textSize": [
        "text-xl"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-4"
      ],
      "padding": [
        "p-4"
      ]
    },
    "outline": {
      "textSize": [
        "text-xl"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-4"
      ],
      "padding": [
        "p-4"
      ]
    }
  },
  "huge": {
    "fill": {
      "textSize": [
        "text-2xl"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-4"
      ],
      "padding": [
        "p-4"
      ]
    },
    "text": {
      "textSize": [
        "text-2xl"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-4"
      ],
      "padding": [
        "p-4"
      ]
    },
    "outline": {
      "textSize": [
        "text-2xl"
      ],
      "textWeight": [
        "font-medium"
      ],
      "gap": [
        "gap-4"
      ],
      "padding": [
        "p-4"
      ]
    }
  },
  "extreme": {
    "fill": {
      "textSize": [
        "text-2xl"
      ],
    …
Class lists per `size` and variant: `textSize`, `textWeight`, `gap`, `padding`.

breadcrumbs

Defaults for Breadcrumbs.

PathTypeDefaultDescription
breadcrumbs.defaultSeparatorstring"|"Separator rendered between breadcrumb items.

form.label

Floating label behaviour and class names shared by every field.

PathTypeDefaultDescription
form.label.asstring"label"Element used to render labels.
form.label.showRequiredIndicatorbooleantrueShow the required marker when the field is `required`.
form.label.classNamestring"flex-nowrap items-center text-xs font-medium text-title-2 gap-1"Base class names of the label.
form.label.stateSharedClassNamestring"absolute flex-nowrap items-center origin-left z-25 rtl:origin-right rounded transition-al…Class names shared by the resting and floating label states.
form.label.inactiveClassNamestring"inset-px scale-100 px-3 pointer-events-none"Class names while the label rests inside the input.
form.label.activeClassNamestring"top-0 inset-s-3 translate-y-[-50%] scale-90 max-w-[calc(100%-0.5rem)] px-1.5 py-px"Class names while the label floats above the input (focused or filled).

form.fieldset

Wrapper class applied around every field.

PathTypeDefaultDescription
form.fieldset.classNamestring"text-title-2 [&_label]:bg-[inherit]"Class names applied to the fieldset that wraps a field.

form.textField

Defaults for TextField.

PathTypeDefaultDescription
form.textField.classNamestring"text-sm placeholder:text-body-3"Class names applied to the text input.

form.textareaField

Defaults for TextareaField.

PathTypeDefaultDescription
form.textareaField.classNamestring"text-sm placeholder:text-body-3"Class names applied to the textarea.
form.textareaField.defaultRowsnumber2Rows used when `properties.rows` is not set.

form.searchField

Icons used by SearchField.

PathTypeDefaultDescription
form.searchField.clearIconstring"🗙"—
form.searchField.searchIconstring"🔎︎"—

form.selectField

Defaults for SelectField.

PathTypeDefaultDescription
form.selectField.triggerIconstring"⮟"Default content of the select trigger.
form.selectField.optionClassNamestring"bg-main hover:bg-third"Class names of each option.
form.selectField.optionGroupClassNamestring"bg-main hover:bg-third"Class names of each option group.

form.checkField

Defaults for CheckField.

PathTypeDefaultDescription
form.checkField.checkIconstring""—
form.checkField.colorstring"text-muted"—
form.checkField.activeColorstring"text-primary"—

form.passwordField

Defaults for PasswordField: validation rules, colors per strength and icons.

PathTypeDefaultDescription
form.passwordField.useLengthbooleantrue—
form.passwordField.lengthnumber8—
form.passwordField.maxLengthundefinedundefined—
form.passwordField.useLowercasebooleantrue—
form.passwordField.lowercaseLengthnumber1—
form.passwordField.useUppercasebooleantrue—
form.passwordField.uppercaseLengthnumber1—
form.passwordField.useNumbersbooleantrue—
form.passwordField.numbersLengthnumber1—
form.passwordField.useSpecialCharsbooleantrue—
form.passwordField.specialCharsLengthnumber1—
form.passwordField.hasCopybooleantrue—
form.passwordField.hasGeneratebooleanfalse—
form.passwordField.hasShowbooleantrue—
form.passwordField.hasValidationbooleanfalse—
form.passwordField.showValidationProgressbooleantrue—
form.passwordField.showValidationsListbooleanfalse—
form.passwordField.colors.0.textColorstring"text-error"—
form.passwordField.colors.0.progressColorstring"bg-error"—
form.passwordField.colors.20.textColorstring"text-error"—
form.passwordField.colors.20.progressColorstring"bg-error"—
form.passwordField.colors.40.textColorstring"text-warning"—
form.passwordField.colors.40.progressColorstring"bg-warning"—
form.passwordField.colors.60.textColorstring"text-info"—
form.passwordField.colors.60.progressColorstring"bg-info"—
form.passwordField.colors.80.textColorstring"text-primary"—
form.passwordField.colors.80.progressColorstring"bg-primary"—
form.passwordField.colors.100.textColorstring"text-success"—
form.passwordField.colors.100.progressColorstring"bg-success"—
form.passwordField.invalidIconstring"✘"—
form.passwordField.validIconstring"✔"—
form.passwordField.showIconstring"👁"—
form.passwordField.hideIconstring"⊘"—
form.passwordField.confirmMainIconstring"🔒︎"—
form.passwordField.confirmingMainIconstring"ᗢ"—
form.passwordField.copyIconstring"🗐"—

form.pinField

Defaults for PinField.

PathTypeDefaultDescription
form.pinField.lengthnumber6—
form.pinField.classNamestring"rounded-xl text-center text-xl font-bold text-title-1"—

form.rangeField

Defaults for RangeField.

PathTypeDefaultDescription
form.rangeField.stepnumber1—
form.rangeField.showMinMaxbooleantrue—
form.rangeField.showValuebooleantrue—
form.rangeField.valuePrefixstring""—
form.rangeField.valueSuffixstring""—
form.rangeField.classNamestring"text-sm"—

form.colorField

Defaults for ColorField (preset swatches, alpha, empty state).

PathTypeDefaultDescription
form.colorField.presetsSet["#ef4444","#f97316","#f59e0b","#eab308","#84cc16","#22c55e","#10b981","#14b8a6","#06b6d4"…
Show full value
[
  "#ef4444",
  "#f97316",
  "#f59e0b",
  "#eab308",
  "#84cc16",
  "#22c55e",
  "#10b981",
  "#14b8a6",
  "#06b6d4",
  "#0ea5e9",
  "#3b82f6",
  "#6366f1",
  "#8b5cf6",
  "#a855f7",
  "#d946ef",
  "#ec4899",
  "#f43f5e",
  "#78716c",
  "#64748b",
  "#000000",
  "#ffffff"
]
Preset swatches offered by the picker.
form.colorField.alphabooleantrueAllow selecting opacity.
form.colorField.allowEmptybooleantrueAllow clearing the value.

form.phoneField

Defaults for PhoneInput.

PathTypeDefaultDescription
form.phoneField.worldwidebooleantrue—
form.phoneField.codePrefixstring"+"—
form.phoneField.showCountriesNamebooleantrue—
form.phoneField.selectedCountriesOnlyarray[]
Show full value
[]
—
form.phoneField.showCountriesFlagsbooleantrue—

form.autoCompleteField

Defaults for AutocompleteField.

PathTypeDefaultDescription
form.autoCompleteField.triggerIconstring"⮟"—
form.autoCompleteField.triggerWrapperClassNamestring"text-sm"—
form.autoCompleteField.multiplebooleanfalse—
form.autoCompleteField.searchablebooleantrue—
form.autoCompleteField.searchViaLabelbooleantrue—
form.autoCompleteField.showClearSearchbooleantrue—
form.autoCompleteField.ClearSearchIconstring"🗙"—
form.autoCompleteField.multipleTagsCloseIconstring"🗙"—

form.uploaderField

Defaults for UploaderField: limits, accepted categories and icons.

PathTypeDefaultDescription
form.uploaderFieldobject{ 27 entries }
Show full value
{
  "defaultFileCategory": [
    "all"
  ],
  "onDetectErrors": "[function]",
  "minBlockHeight": "min-h-[100px]",
  "showProgress": true,
  "progressColor": "text-primary",
  "allowDragAndDrop": true,
  "allowPaste": true,
  "minFiles": 1,
  "maxSize": 5,
  "fileIcon": "🗎",
  "filesIcon": "🗐",
  "imageIcon": "⛶",
  "imagesIcon": "⛶",
  "videoIcon": "▷",
  "videosIcon": "▷",
  "audioIcon": "♫",
  "audiosIcon": "♫",
  "textIcon": "🗎",
  "textsIcon": "🗐",
  "applicationIcon": "■",
  "applicationsIcon": "■",
  "executableIcon": "■",
  "executablesIcon": "■"
}
—

form.numberField

Defaults for NumberField.

PathTypeDefaultDescription
form.numberField.allowTelSymbolsbooleanfalse—
form.numberField.decimalSeparatorstring"."—
form.numberField.decimalsMaxnumber3—
form.numberField.decimalsMinnumber0—
form.numberField.thousandSeparatorstring","—

form.ratingField

Defaults for RatingField.

PathTypeDefaultDescription
form.ratingField.maxnumber5—
form.ratingField.stepnumber1—
form.ratingField.allowClearbooleantrue—
form.ratingField.classNamestring"text-body-3"—
form.ratingField.activeClassNamestring"text-amber-400"—
form.ratingField.iconSizenumber24—
form.ratingField.emptyIconundefinedundefined—
form.ratingField.iconundefinedundefined—

form.dateField

Defaults for DateField: week start, 12/24h clock, steps, icons and presets.

PathTypeDefaultDescription
form.dateField.firstDayOfWeeknumber0First day of the calendar week: 0 = Sunday, 1 = Monday, 6 = Saturday.
form.dateField.hour12booleantrueUse a 12-hour clock with AM/PM.
form.dateField.timeFormatstring"12"Clock format: `12` or `24`.
form.dateField.showSecondsbooleanfalseShow a seconds column in time pickers.
form.dateField.allowClearbooleantrueShow the clear action.
form.dateField.minuteStepnumber1Step of the minutes column.
form.dateField.secondStepnumber1Step of the seconds column.
form.dateField.openOnInputClickbooleanfalseOpen the picker when the input is clicked.
form.dateField.manualInputbooleantrueAllow typing a value directly into the input.
form.dateField.editManualbooleantrueAlias of `manualInput`.
form.dateField.calendarIconstring"📅"—
form.dateField.clockIconstring"🕒"—
form.dateField.clearIconstring"✕"—
form.dateField.chevronLeftstring"‹"—
form.dateField.chevronRightstring"›"—
form.dateField.presetsobject{ 7 entries }
Show full value
{
  "date": [
    {
      "title": "Today",
      "date": "[function]"
    },
    {
      "title": "Yesterday",
      "date": "[function]"
    },
    {
      "title": "Tomorrow",
      "date": "[function]"
    }
  ],
  "dateRange": [
    {
      "title": "Today",
      "date": "[function]"
    },
    {
      "title": "Yesterday",
      "date": "[function]"
    },
    {
      "title": "Last 7 Days",
      "date": "[function]"
    },
    {
      "title": "Last 30 Days",
      "date": "[function]"
    },
    {
      "title": "This Month",
      "date": "[function]"
    },
    {
      "title": "Last Month",
      "date": "[function]"
    },
    {
      "title": "This Year",
      "date": "[function]"
    }
  ],
  "time": [
    {
      "title": "Now",
      "date": "[function]"
    },
    {
      "title": "09:00",
      "date": "09:00"
    },
    {
      "title": "12:00",
      "date": "12:00"
    },
    {
      "title": "15:00",
      "date": "15:00"
    },
    {
      "title": "18:00",
      "date": "18:00"
    }
  ],
  "timeRange": [
    {
      "title": "Morning (09:00 - 12:00)",
      "date": [
        "09:00",
        "12:00"
      ]
    },
    {
      "title": "Afternoon (13:00 - 17:00)",
      "date": [
        "13:00",
        "17:00"
      ]
    },
    {
      "title": "Business Day (09:00 - 18:00)",
      "date": [
        "09:00",
        "18:00"
      ]
    }
  ],
  "dateTime": [
    {
      "title": "Now",
      "date": "[function]"
    }
  ],
  "dateTimeRange": [
    {
      "title": "Today",
      "date": "[function]"
    },
    {
      "title": "Last 7 Days",
      "date": "[function]"
    },
    {
      "title": "This Month",
      "date": "[function]"
    }
  ],
  "datetime": []
}
Quick-pick presets per mode (`date`, `dateRange`, `time`, ...).

theme

Theme switching behaviour and icons.

PathTypeDefaultDescription
theme.defaultstring"LIGHT"Initial theme: LIGHT, DARK, ...
theme.switchingAnimationbooleantrueAnimate theme changes.
theme.themeStorageKeystring"theme"localStorage key that stores the chosen theme.
theme.themeRangeStorageKeystring"theme-dynamic-range"localStorage key that stores the dynamic-mode time range.
theme.themeDynamicStartTimestring"06:00"Dynamic mode: time the dark theme starts (HH:mm).
theme.themeDynamicEndTimestring"18:00"Dynamic mode: time the dark theme ends (HH:mm).
theme.lightModeIconstring"☼"—
theme.darkModeIconstring"☾︎"—
theme.systemDetectionIconstring"🖧"—
theme.dynamicModeIconstring"◐"—

responsive

Breakpoints used by the responsive provider and hooks.

PathTypeDefaultDescription
responsive.xsnumber0Breakpoint values, in the same shape as Tailwind screens.
responsive.smstring"40rem"Breakpoint values, in the same shape as Tailwind screens.
responsive.mdstring"48rem"Breakpoint values, in the same shape as Tailwind screens.
responsive.lgstring"64rem"Breakpoint values, in the same shape as Tailwind screens.
responsive.xlstring"80rem"Breakpoint values, in the same shape as Tailwind screens.
responsive.2xlstring"96rem"Breakpoint values, in the same shape as Tailwind screens.
responsive.3xlstring"120rem"Breakpoint values, in the same shape as Tailwind screens.

settings

Global direction and locale.

PathTypeDefaultDescription
settings.isRtlbooleanfalseRender in right-to-left direction (also feeds rich-text editor direction).
settings.localestring"en"Locale code (also feeds the rich-text editor language).