Installation

Use the V3 npm package for centralized updates, or install source through the registry when you want to own and edit every component layer.

Npm package

Recommended for semver updates, package imports and the fastest application setup.

pnpm add poyraz-ui@3

Own the source

Install selected components locally for markup, recipe and Radix composition control.

pnpm dlx shadcn@latest add @poyraz/button

1. Install the V3 npm package

The package route keeps supported imports under `poyraz-ui` and receives centralized updates through npm:

pnpm

pnpm add poyraz-ui@3

npm

npm install poyraz-ui@3

yarn

yarn add poyraz-ui@3

Alternative: Own the source

Choose this route when a component should live in your repository. Add the production namespace to `components.json`, then install only the source you need.

{
  "registries": {
    "@poyraz": "https://ui.poyrazavsever.com/r/{name}.json"
  }
}

pnpm dlx shadcn@latest add @poyraz/button

The installed files are consumer-owned. Registry installation is optional and does not replace the supported V3 npm runtime package.

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, motion utilities for molecule animations, and automatically configures Tailwind to scan Poyraz UI components for utility classes.

This import is required for animated Accordion, Dropdown Menu, Select, Popover, Tooltip, Dialog, Sheet, and other molecule interactions.

You can set this up automatically with the CLI:

npx poyraz-ui@3 init --mode package

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 v3 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@3 init --mode package) can scaffold this configuration automatically.