Introduction
Poyraz UI is a minimal design system built with React, Next.js, Tailwind CSS v4, and Radix UI.
What is Poyraz UI?
Poyraz UI is an open-source component library designed specifically for building modern web applications with a bold, brutalist aesthetic. It provides a comprehensive set of accessible, composable, and customizable components.
Unlike traditional UI libraries that rely on rounded corners, subtle shadows, and soft gradients, Poyraz UI embraces a clean, minimal design language. Every component is built with solid borders, subtle rounding, and high-contrast color schemes.
Design Philosophy
The design system follows four core principles:
Clean Borders
border is the DNA of the system. Every interactive element, card, and section uses clean solid borders as its primary visual identifier.
Subtle Rounding
rounded-sm is applied everywhere. Gentle, intentional corners give each element a refined, modern feel.
No Shadows
shadow-none by default. Instead of box-shadow, elevated components use red-colored offset boxes as a brutalist alternative.
High Contrast
Red-600 as primary, slate for neutral tones. Bold typography with uppercase labels and wide tracking ensures clear visual hierarchy.
Atomic Architecture
Components are organized following the Atomic Design methodology:
Atoms
17 components
Fundamental building blocks: Button, Input, Badge, Avatar, Card, Typography, Checkbox, Radio, Switch, Label, Textarea, Separator, Skeleton, Scroll Area, Form Fields, Logo, BG Patterns.
Molecules
21 components
Functional groups: Accordion, Alert, Autocomplete, Breadcrumb, Calendar, Command Palette, Date Picker, Dialog, Drawer, Dropdown Menu, Form, Hover Card, Modal, Pagination, Popover, Select, Sheet, Sonner/Toast, Tabs, Tooltip, Mermaid.
Organisms
5 components
Complex sections: Announcement Bar, Data Table, Navbar (with TopBar, MegaMenu, Mobile support), Sidebar (collapsible, floating, mini), Footer (full, compact, branded).
Tech Stack
| Technology | Purpose |
|---|---|
| React 19 | UI rendering |
| Next.js 16 | Framework (optional peer dep) |
| Tailwind CSS v4 | Styling |
| Radix UI | Accessible primitives |
| CVA | Variant management |
| clsx + tailwind-merge | Class name utilities |
| tsup | Library bundling (ESM + CJS) |
| TypeScript | Type safety |
v2.0.1 — Theming & CLI
Poyraz UI v2 introduces a semantic token system powered by CSS custom properties. All components now use var(--poyraz-*) tokens, making full theme customization possible without touching component source code.
Semantic Tokens
40+ CSS custom properties with sensible fallbacks. Works standalone (light theme) or with any CSS variable-based theme switcher.
reactive-switcher Support
Optional integration with reactive-switcher for dynamic theme switching. Light & Dark themes included out of the box.
CLI Setup Wizard
Run npx poyraz-ui init to automatically configure CSS imports and optionally scaffold theme configuration.
Theme Exports
Import pre-built themes via poyraz-ui/themes. Includes poyrazLightTheme and poyrazDarkTheme configurations.