Introduction
Poyraz UI is a brutalist 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 raw, unapologetic design language. Every component is built with dashed borders, sharp corners, and high-contrast color schemes.
Design Philosophy
The design system follows four core principles:
Dashed Borders
border-dashed is the DNA of the system. Every interactive element, card, and section uses dashed borders as its primary visual identifier.
No Rounding
rounded-none is applied everywhere. Sharp, intentional corners give each element a raw, industrial 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
14 components
Fundamental building blocks: Button, Input, Badge, Avatar, Card, Typography, Checkbox, Radio, Switch, Label, Textarea, Separator, Skeleton, Logo.
Molecules
12 components
Functional groups: Accordion, Alert, Breadcrumb, Dialog, DropdownMenu, Form, Pagination, Popover, Select, Sonner/Toast, Tabs, Tooltip.
Organisms
3 components
Complex sections: 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 |