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:

PackageVersionRequired
react≥ 18Yes
react-dom≥ 18Yes
tailwindcss≥ 4Yes

3. Import CSS Preset

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

/* 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 (
<Button variant="default">
Click me
</Button>
);
}