Installation

Get Poyraz UI up and running in your project in minutes.

1. Install the package

Install Poyraz UI with your preferred package manager:

pnpm

pnpm add poyraz-ui

npm

npm install poyraz-ui

yarn

yarn add poyraz-ui

2. Peer Dependencies

Poyraz UI requires the following peer dependencies. Make sure they are installed in your project:

Package	Version	Required
react	≥ 18	Yes
react-dom	≥ 18	Yes
tailwindcss	≥ 4	Yes

3. Import CSS Preset

Add the Poyraz UI CSS preset to your global stylesheet. The preset includes semantic design tokens (colors, fonts), base layer styles, and automatically configures Tailwind to scan Poyraz UI components for utility classes.

You can set this up automatically with the CLI:

npx poyraz-ui init

Or manually add the import to your CSS file:

/* globals.css */

@import

"tailwindcss";

@import "poyraz-ui/preset.css";

4. Start Using Components

Import components directly from the package. You can import from the main entry point or use the tree-shakeable sub-paths:

// Import everything

import { Button, Card } from "poyraz-ui";

// Or import by layer (tree-shake friendly)

import { Button } from "poyraz-ui/atoms";

import { Dialog } from "poyraz-ui/molecules";

import { Navbar } from "poyraz-ui/organisms";

5. Minimal Example

Here's a complete example using a Button:

import { Button } from "poyraz-ui/atoms";

export default function App() {

return (

Click me

</Button>

);

}

6. Theme Support (Optional)

Poyraz UI v2 uses semantic CSS tokens that can be overridden for full theme customization. For dynamic theme switching, install reactive-switcher and use the built-in theme presets:

Install reactive-switcher

pnpm add reactive-switcher

Configure themes

import { ThemeProvider } from "reactive-switcher";

import { poyrazLightTheme, poyrazDarkTheme } from "poyraz-ui/themes";

The CLI wizard (npx poyraz-ui init) can scaffold this configuration automatically.