Getting Started
To begin using NeoBrutalismCSS in your web projects, follow these simple steps:
-
Installation: Download the NeoBrutalismCSS library from the official website or include it via a package manager like npm, pnpm or yarn.
npm install neobrutalismcss
or Include CSS: Include the NeoBrutalismCSS stylesheet in the `
` section of your HTML document:<link rel="stylesheet" href="https://unpkg.com/neobrutalismcss@latest" />
-
HTML Structure: Create your web page using the provided CSS classes and components, as demonstrated in the documentation.
-
Customization: Customize the styles and components according to your project's design requirements by overriding NeoBrutalismCSS classes.
That's it! You're now ready to create web designs with the unique aesthetics of NeoBrutalism using NeoBrutalismCSS.
Docs
NeoBrutalismCSS is designed with simplicity in mind. Say goodbye to the complexities of learning numerous class names found in other frameworks. Instead, it follows a minimalist approach by applying fundamental styles based on HTML semantics.
Embrace a streamlined, no-frills approach to web design with NeoBrutalismCSS and start creating modern, neo-brutalist aesthetics with ease.
NeoBrutalismCSS doesn't provide any fonts, but we do maintain the following list of fonts that we recommend for usage alongside our framework for your convenience: Stint Ultra Expanded, Proza Libre, Lexend Mega and Public Sans
Components
Buttons
Section showcases different button styles offered by NeoBrutalismCSS, including default, orange, blue, and green buttons.
<button class="nb-button default"> Click Here </button>
<button class="nb-button orange"> Click Here </button>
<button class="nb-button blue"> Click Here </button>
<button class="nb-button green"> Click Here </button>
<button class="nb-button default rounded"> Click Here </button>
<button class="nb-button orange rounded"> Click Here </button>
<button class="nb-button blue rounded"> Click Here </button>
<button class="nb-button green rounded"> Click Here </button>
Inputs
Section demonstrates various input field styles, including default, orange, blue, and green inputs, provided by NeoBrutalismCSS.
<input class="nb-input default" placeholder="Text" />
<input class="nb-input orange" placeholder="Text" />
<input class="nb-input blue" placeholder="Password" />
<input class="nb-input green" placeholder="Email@example.com" />
Checkbox
Section showcases checkbox style provided by NeoBrutalismCSS.
<div class="dialog">
<label class="nb-label">Bike
<input type="checkbox" id="vehicle1" class="nb-checkbox" name="vehicle1" value="Bike">
</label>
<label class="nb-label">Car
<input type="checkbox" id="vehicle2" class="nb-checkbox" name="vehicle2" value="Car">
</label>
<label class="nb-label">Boat
<input type="checkbox" id="vehicle3" class="nb-checkbox" name="vehicle3" value="Boat">
</label>
</div>
Card
Section presents a card with text content and image. It illustrates a user interface component provided by NeoBrutalismCSS for cards.
<div class="card">
<a href="https://example.com">
<div class="card-thumbnail">
<img src="assets/card-img.svg" loading="lazy" alt="Explore NeoBrutalismCSS" class="card-thumbnail"/>
</div>
<div class="card-content">
<div class="text-small">October 8, 2023</div>
<p>
<strong>Explore NeoBrutalismCSS: A Revolutionary library</strong>
</p>
<p>Unveil the future of NeoBrutalism with our groundbreaking approach that will transform your life.</p>
<p><strong>Learn More -></strong></p>
</div>
</a>
</div>
Badge
Section presents a badge with text. It illustrates a user interface component provided by NeoBrutalismCSS for badges.
Excellence
<div class="badge bg-orange text-white">
<div class="badge-inner">
<p class="badge-text">Excellence</p>
</div>
</div>
Dialog
Section presents a dialog box with text content and buttons. It illustrates a user interface component provided by NeoBrutalismCSS for dialogs and pop-ups.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima officiis officia, nulla commodi repellat modi ab et ea! Excepturi molestiae voluptatibus voluptatum
Not sure how I feel about it
<div class="dialog">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
officiis officia, nulla commodi repellat modi ab et ea! Excepturi molestiae voluptatibus
voluptatum</p>
<p>Not sure how I feel about it</p>
<div class="button-container">
<button class="nb-button default">Cancel</button>
<button class="nb-button green">Save</button>
</div>
</div>
Marquee
Section demonstrates a marquee component provided by NeoBrutalismCSS.
<div class="marquee">
<div class="marquee-content">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
</div>
</div>
Avatar
Section demonstrates an avatar component provided by NeoBrutalismCSS.

<div class="avatar bg-pale-red">
<img src="assets/avatar-1.png" alt="Avatar" />
</div>
Modal
Section demonstrates a modal component provided by NeoBrutalismCSS.
Modal Title
Content for the modal
<input type="checkbox" id="modal">
<label for="modal" class="nb-button rounded green">Open Modal</label>
<label for="modal" class="modal-background"></label>
<div class="modal dialog">
<div class="modal-header">
<h3> Modal Title</h3>
<label for="modal" class="close"></label>
</div>
<p>Content for the modal</p>
</div>
Alert
Section demonstrates an alert component provided by NeoBrutalismCSS.
This is a success alert
This is a danger alert
This is a warning alert
This is an info alert
<div class="alert success">
<p>This is a success alert</p>
</div>
<div class="alert error">
<p>This is a danger alert</p>
</div>
<div class="alert warning">
<p>This is a warning alert</p>
</div>
<div class="alert info">
<p>This is an info alert</p>
</div>
Accordion
Section demonstrates an accordion component provided by NeoBrutalismCSS.
<div class="accordion">
<input class="accordion-tab" type="checkbox" id="tab1" />
label class="accordion-label bg-blue" for="tab1">Item 1</label>
<div class="accordion-content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
</div>
</div>
Dropdown
Section demonstrates an dropdown component provided by NeoBrutalismCSS.
<select class="dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
Colors
Section, you can see different colored background elements with their respective color names. NeoBrutalismCSS offers a range of background colors.
#ff5733 orange
#0077b6 blue
#40d39c green
#b9e2f8 sky-blue
#ffc5c8 pale-red
#bc98cb pale-violet
#4799ae soft-blue
#b9e7de pale-cyan
#fdfd96 pale-yellow