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.1.0 - Motion System
Poyraz UI v2.1 adds a centralized motion layer for molecule and overlay components. Accordion, Dropdown Menu, Select, Popover, Tooltip, Hover Card, Dialog, Modal, Sheet, Command Palette, Date Picker, Autocomplete, Tabs, Calendar and related interaction states now use the shared motion utilities from poyraz-ui/preset.css.
No component API changes are required. Existing JSX, props and import paths continue to work after updating the package.
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.