siphonophores / neo-brutalism-ui-library

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

Table of contents

• Usage
• Configurations
• Contributing
• Technologies
• License
• Acknowledgement

Usage

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

1. Clone the repository and run yarn && yarn storybook at the root of it.
2. 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.
3. Feel free to copy the code of the components to your project! All the components can be found in ./src/components folder.
4. 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

1. Visit Neo-Brutalism UI website, and navigate to the components page.
2. Simply copy and paste the code snippet by clicking "Copy to clipboard" button.
3. 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

Contributing

Your contributions are always welcome! Make a PR if you have any suggestions!:smile:

Technologies

License

The MIT License

Acknowledgement

This project is inspired by Neo-Brutalism UI Kit. Huge thanks to Muhamad Digdaya!!:star_struck: