/neo-brutalism-ui-library

Primary LanguageTypeScript

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

demo-gif

Table of contents

Usage

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

storybook-gif

  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 violet-300
    xxx-violet-300 #918efa violet-200
    xxx-violet-400 #807dfa violet-400
    xxx-pink-200 #FFA6F6 pink-300
    xxx-pink-300 #fa8cef pink-300
    xxx-pink-400 #fa7fee pink-300
    xxx-red-200 #FF9F9F red-300
    xxx-red-300 #fa7a7a red-300
    xxx-red-400 #f76363 red-300
    xxx-orange-200 #FFC29F orange-300
    xxx-orange-300 #FF965B orange-300
    xxx-orange-400 #fa8543 orange-300
    xxx-yellow-200 #FFF066 yellow-300
    xxx-yellow-300 #FFE500 yellow-300
    xxx-yellow-400 #FFE500 yellow-300
    xxx-lime-200 #B8FF9F lime-300
    xxx-lime-300 #9dfc7c lime-300
    xxx-lime-400 #7df752 lime-300
    xxx-cyan-200 #A6FAFF cyan-300
    xxx-cyan-300 #79F7FF cyan-300
    xxx-cyan-400 #53f2fc cyan-300

Contributing

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

Technologies

react-logo typescript-logo tailwind-css-logo storybook-logo vitejs-logo

License

The MIT License

Acknowledgement

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