Introduction

Zalify UI is a production-ready React component library that ships as a single NPM package. It provides beautiful, accessible components with embedded CSS — no external style configuration required.

Zero-Config Styling

Zalify UI embeds all component styles directly in the package. There are no CSS files to import, no build plugins to configure, and no external style dependencies to manage.

Wrap your app with ZalifyProvider and every component is styled automatically:

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

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

Composition

All Zalify UI components are built on top of Ark UI, a headless component library designed for building scalable design systems. Every component is architected with composability at its core, enabling seamless combination and customization without complex workarounds.

Server Component Support

Zalify UI is designed for the React Server Components architecture. Components that don't need interactivity work as Server Components out of the box, while interactive components are properly marked with 'use client' directives.

import { Heading, Badge } from '@zalify-ui/react'

export default function Page() {
  return (
    <>
      <Heading as="h1">Dashboard</Heading>
      <Badge>Active</Badge>
    </>
  )
}

Beautiful Design

Developed in collaboration with Brains & Pixels, Zalify UI provides a large collection of components with carefully chosen default styles. They are designed to look good on their own and to work well together as a consistent system.

• Minimalistic Design: Your UI has a clean and minimal look without extra work.
• Consistent Styling: Components naturally fit with one another. Each component is built to match the others, keeping your UI consistent.
• Customizable Theming: Configure accent colors, gray palettes, and border radii through ZalifyProvider props.

AI Ready

The architecture of Zalify UI makes it easy for AI tools to work with your code. Its consistent API allows AI models to read, understand, and generate new components that integrate seamlessly with your existing design system.