GitHub

Setup Guide

Install the package

Install @zalify-ui/react and its peer dependency React.

npm install @zalify-ui/react

Add the Provider

Wrap your application with ZalifyProvider. This injects the component styles and sets up theming.

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ZalifyProvider accentColor="jade" grayColor="neutral" borderRadius="md">
          {children}
        </ZalifyProvider>
      </body>
    </html>
  )
}

See Theming for all available accent colors, gray palettes, and border radius options.

Use components

Import and use any component from the package.

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

export const App = () => {
  return <Button>Zalify UI</Button>
}

And that's it! Happy hacking!

Installation

Setup Guide

Install the package

Add the Provider

Use components