Theming

Zalify UI theming is configured through ZalifyProvider props. The provider injects all component styles and maps your chosen accent color, gray palette, and border radius across the entire component library.

import { ZalifyProvider } from '@zalify-ui/react'

<ZalifyProvider accentColor="jade" grayColor="neutral" borderRadius="md">
  {children}
</ZalifyProvider>

Accent Color

The accentColor prop sets the primary color palette used across interactive components. Available values:

neutral tomato red ruby crimson pink plum purple violet iris indigo blue cyan teal jade green grass bronze gold brown orange amber yellow lime mint sky

Gray Color

The grayColor prop sets the neutral palette used for text, borders, and backgrounds. Available values:

neutral mauve olive sage sand slate

Border Radius

The borderRadius prop controls corner rounding globally. Available values:

none xs sm md lg xl 2xl

Components

Zalify UI components are designed with consistent sizing and standardized variants to ensure visual harmony across your interface.

Sizing

Zalify UI organizes component sizing into two categories:

• Primary components — core interactive elements that drive user actions (e.g., Buttons, Inputs, Selects).
• Secondary components — supporting elements that complement primary interactions (e.g., Badges, Checkboxes, Switches).

This categorization establishes a clear hierarchy and guarantees alignment. Components within the same category share identical heights for a given size token. For example, both a md Button and a md Input are exactly 40px tall, ensuring perfect alignment when placed together.

Variants

Variants are standardized across components for a unified look and feel. Zalify UI defines five shared variants:

• solid
• subtle
• surface
• outline
• plain

This consistency allows you to combine components without worrying about mismatched styles. Using the same variant across elements guarantees visual harmony.

Solid

High-contrast background with inverted foreground. Use for primary CTAs, submit buttons, and main actions.

Subtle

Tinted background with matching foreground. Use for badges, tags, selected states, and secondary highlights.

Surface

Background with visible border and hover states. Use for cards, menu items, selectable lists, and elevated containers.

Outline

Border-only with transparent background. Use for secondary actions, cancel buttons, filters, and tertiary controls.

Plain

Minimal style with background on interaction. Use for text buttons, links, tabs, and ghost actions.

Colors

Zalify UI's color system is built on Radix Colors. Each color comes with 12 shades per mode (light and dark), for a total of 24 shades.

Gray

Accent

Pairings

Zalify UI is built around the concept of one accent color and one gray color. Configure which combination works best for you via the ZalifyProvider props.

Neutral Pairings

If you want a neutral vibe, or you want to keep things simple, neutral will work well with any hue or palette.

Natural pairing

Alternatively, choose the gray scale which is saturated with the hue closest to your accent hue. The difference is subtle, but this will create a more colorful and harmonious vibe.

Tokens

Border Radius

Radii tokens define consistent corner rounding across components. This setup makes it easy to nest border radii as shown below.

• l1 – smallest radius, used inside other elements
• l2 – medium radius, used when wrapping l1
• l3 – largest radius, used when wrapping l2

Shadows

Shadows provide consistent elevation levels, from xs to 2xl. They adapt seamlessly to both light and dark mode.

z-Index