Neo-Brutalism UI Library

Neo-brutalism UI is a collection of React and Tailwind CSS-based components that embody a design approach characterized by bold, high-contrast elements and vibrant colors. It offers a unique and eye-catching aesthetic for webpages.

Demo screen recording

Usage

1. For React users: Clone this repository and use Storybook

Clone the repository and run yarn && yarn storybook at the root of it.
All the components are listed on the left side of the Storybook, allowing you to quickly see how they work and check the component's accepted props.
Feel free to copy the code of the components to your project! All the components can be found in ./src/components folder.
If you also want to run the app, run yarn run dev at the root of the directory.

2. Easier way: Visit the Neo-Brutalism UI website

Visit Neo-Brutalism UI website, and navigate to the components page.
Simply copy and paste the code snippet by clicking "Copy to clipboard" button.
To see it in action, access the playground in StackBlitzand paste your code there. Demo screen recording might help for you to figure out how it works.

Note

Material Design Icons are used in the components. You can download the icons here.

Configurations

This library is intended to be used with Tailwind CSS. If you plan to copy and paste the code snippet but haven't installed Tailwind CSS yet, please refer to their installation instructions.

Note that the theme colors are override in tailwind.config.js. For more details, please check the file.

Class	Color code
xxx-violet-200	`#A8A6FF`
xxx-violet-300	`#918efa`
xxx-violet-400	`#807dfa`
xxx-pink-200	`#FFA6F6`
xxx-pink-300	`#fa8cef`
xxx-pink-400	`#fa7fee`
xxx-red-200	`#FF9F9F`
xxx-red-300	`#fa7a7a`
xxx-red-400	`#f76363`
xxx-orange-200	`#FFC29F`
xxx-orange-300	`#FF965B`
xxx-orange-400	`#fa8543`
xxx-yellow-200	`#FFF066`
xxx-yellow-300	`#FFE500`
xxx-yellow-400	`#FFE500`
xxx-lime-200	`#B8FF9F`
xxx-lime-300	`#9dfc7c`
xxx-lime-400	`#7df752`
xxx-cyan-200	`#A6FAFF`
xxx-cyan-300	`#79F7FF`
xxx-cyan-400	`#53f2fc`