🎨 Brutal UI

Next.js 16 + App Router + 50+ Components

📊 Statistics

39+
Components
Ready to use
100%
TypeScript
Fully typed
⚡
Fast
Optimized builds
🎨
Brutal
Bold design

🎉 Brutal Stickers

💀BRUTAL
🔥HOT
⭐STAR
💎GEM
🎨ART
⚡FAST
🚀LAUNCH
💯PERFECT
🎯TARGET
✨MAGIC

Click на стікери щоб побачити тости! 👆

🎬 Animation Showcase

🖱️ Hover Effects

⬆️
Hover Lift
🔍
Hover Grow
🔄
Hover Rotate
📐
Hover Tilt
🌪️
Hover Shake
🍮
Hover Jello
🎸
Hover Rubber
🎭
Hover Swing

🎚️ Toggle Switches

Варіанти стилів

Default
Brutal
Neon
Gradient

Розміри

Small
Medium
Large

З іконками

Check
Theme
Sound

🎭 Motion Effects

🌪️
Shaker
Hover me!
⬆️
Bouncer
Hover me!
🔄
Spinner
Hover me!
💫
Pulser
Always on!

Наведи курсор щоб побачити ефекти! 🎯

🎴 Interactive Cards

Flip Card

🎴
Front Side
Hover to flip!
✨
Back Side
Amazing!

Reveal Card

Hover Me

🎁

Наведи курсор щоб побачити сюрприз...

Morph Card

🌞
State 1
Yellow vibes

🎪 Animated Icons

🎯⚡💫🌟🎨🎭🔥💎🎸🍮🎉⭐

12 різних анімацій для іконок! 🎬

✨ Features

🚀

Next.js 16

Побудовано на останній версії Next.js з App Router та Server Components

💎

Brutalism First

Товсті рамки, яскраві тіні та жирний дизайн для сміливих проектів

🎯

Accessible

Повна підтримка клавіатурної навігації та screen readers

📱

Responsive

Адаптивний дизайн для всіх розмірів екранів від мобільних до десктопу

Alerts

Badges & Tags

DefaultPrimaryActiveErrorWarningNewSmallLarge

Input Fields

Password must be at least 8 characters

Cards

Default Card

Стандартна картка з 8px тінню.

Featured

Elevated Card

Картка з великою 12px тінню.

New

Bordered Card

Картка без тіні, тільки рамка.

Soon

Tooltips

Skeleton Loading

Content Loaded!

This is the actual content that appears after loading.

Skeleton loading provides a better user experience.

📦 Content Area

Buttons with Ripple

Modal (ESC to close)

Switch & Checkbox

Radio Group

Вибрано: option1

Textarea

Символів: 0

Progress Bars

Завантаження65%
Успіх
Увага
Помилка

Tabs Navigation

Accordion

Toast Notifications

Select & Slider

50
0100

Breadcrumb

Pagination

Поточна сторінка: 1

Dropdown & Popover

Table

NameRoleStatusActions
John DoeDeveloperActive
Jane SmithDesignerActive
Bob JohnsonManagerInactive
Alice BrownDeveloperActive

Avatar & Chips

Avatars

JD
AB
CD
EF

Avatar Group

A1
B2
C3
D4
+2
Chips
Default🎨Primary✓SuccessDeletableSmallLarge

Dividers

Content above thin divider

Content between dividers

Content with label divider

Section

Content after thick divider

Drawer

Spinner & Rating

Spinners

Loading...
Loading...
Loading...

Rating

Ваш рейтинг: 3 / 5

File Upload

Drag & Drop files here

or click to browse

Max size: 5 MB

🗓️ Development Timeline

✓

Design System Created

Створено базовий design system з brutal стилями

Completed
2

39+ Components Built

Розроблено всі основні компоненти з повною типізацією

In Progress
3

Documentation & Examples

Створено повну документацію з live examples

Active
4

NPM Package Release

Публікація пакету на npm для широкого використання

Coming Soon

🚀 Ready to Build?

Почніть створювати брутальні інтерфейси вже сьогодні!

Підпишіться на оновлення та нові компоненти