Login to your account

Enter your email below to login to your account

Don't have an account? Sign up

Alert

You can add components and dependencies to your app using the cli.

Your OTP code is:

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

One

Two

Three

Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester. And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.

Default

Comfortable

Compact

Accept terms and conditions

1

2

3

4

5

@peduarte starred 3 repositories

@radix-ui/primitives

Login to your account

Enter your email below to login to your account

Don't have an account? Sign up

Alert

You can add components and dependencies to your app using the cli.

Your OTP code is:

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

One

Two

Three

Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester. And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.

Default

Comfortable

Compact

Accept terms and conditions

1

2

3

4

5

@peduarte starred 3 repositories

@radix-ui/primitives

Login to your account

Enter your email below to login to your account

Don't have an account? Sign up

Alert

You can add components and dependencies to your app using the cli.

Your OTP code is:

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

One

Two

Three

Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester. And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.

Default

Comfortable

Compact

Accept terms and conditions

1

2

3

4

5

@peduarte starred 3 repositories

@radix-ui/primitives

Login to your account

Enter your email below to login to your account

Don't have an account? Sign up

Alert

You can add components and dependencies to your app using the cli.

Your OTP code is:

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

One

Two

Three

Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester. And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.

Default

Comfortable

Compact

Accept terms and conditions

1

2

3

4

5

@peduarte starred 3 repositories

@radix-ui/primitives

Get started with creating
BrutalUI layouts.

A collection of brutalist-styled components based on shadcn/ui.

Pick a vibe

BrutalUIBrutalUIBrutalUIBrutalUI

BrutalUIBrutalUIBrutalUIBrutalUI

BrutalUIBrutalUIBrutalUIBrutalUI

BrutalUIBrutalUIBrutalUIBrutalUI

BrutalUIBrutalUIBrutalUIBrutalUI

BrutalUIBrutalUIBrutalUIBrutalUI

BrutalUIBrutalUIBrutalUIBrutalUI

Made with Tailwind

These components efficiently utilize Tailwind and its versatile utility classes, enabling swift and straightforward styling.

Open source

This project is open source with an MIT License, fostering collaboration and allowing widespread adoption and modification.

Based on Shadcn/ui

Most of the components are based on shadcn/ui, meaning high-quality components with best practices.

Customizable

You can easily customize these components to suit your needs.

Fully customizable set of components.

You can customize the styling of the components to your liking. Visit styling page to see the available options.

Success! Your changes have been saved

This is an alert with icon, title and description.

Yes. It adheres to the WAI-ARIA design pattern.

Badge

Frequently asked questions

BrutalUIBrutalUIBrutalUIBrutalUI

BrutalUIBrutalUIBrutalUIBrutalUI

BrutalUIBrutalUIBrutalUIBrutalUI

BrutalUIBrutalUIBrutalUIBrutalUI

BrutalUIBrutalUIBrutalUIBrutalUI

BrutalUIBrutalUIBrutalUIBrutalUI

BrutalUIBrutalUIBrutalUIBrutalUI

Start your BrutalUI project today.