Free Neo Brutalism UI Kit Collection for Figma, React, and Tailwind (2026)
Most “brutalist” UI kits floating around are either half-finished demos or one designer’s portfolio piece dressed up as a library. This roundup cuts to the 32 free neo brutalism UI kit options actually worth bookmarking — full component sets, working React libraries, and Tailwind templates you can ship from.
Best Picks at a Glance
| Pick | Best For | Cost |
| Neo Brutalism UI Library (Figma) | Designing screens before any code is written | Free |
| NeoBrutalism Components | Production React + Tailwind apps | Free |
| Retro UI | shadcn/ui projects that need a neo-brutal skin | Free |
| Neo-Brutalism UI Library (Vercel) | Tailwind-only static sites and landing pages | Free |
| Brutalism Dashboard | SaaS admin panels with personality | Free + Pro |
| Neubrutalism Design System | Teams setting up tokens and shared rules | Free |
| Neo-Brutalism CSS | Vanilla HTML/CSS projects, no build step | Free |
| Neobrutalism Portfolio Template | Designer/dev personal sites | Free |
Category Jump Index
- Figma UI Kits & Components (7 items) — pre-built screens, components, and full kits for design work
- React & Next.js Libraries (4 items) — component libraries you can npm install and ship
- Tailwind CSS Templates and Libraries (6 items) — utility-class starters, full templates, and Framer kits
- Dashboard & Admin Templates (4 items) — admin layouts with charts, tables, and side nav
- Portfolio Templates (4 items) — bento, windowed, and traditional portfolio layouts
- Design Systems & Foundations (3 items) — tokenized systems, themes, and mini-kits
- CSS Libraries and Frameworks (3 items) — vanilla CSS, no framework dependency
- Misc, Blogs & Inspiration (2 items) — reference articles and live design examples
Who This Is For / Who Should Skip It
For: If you’re a designer or front-end developer who wants to ship a landing page, dashboard, or portfolio in the neo-brutalist style without designing every button, shadow, and border from scratch — this list gives you a working starting point in Figma, React, Vue, Tailwind, or plain CSS.
Skip: If you’re building a fintech app, healthcare product, or anything where users need to feel calm and in control, neo brutalism is the wrong call — the loud colors and aggressive shadows fight against trust. You’re better off with shadcn/ui defaults or a soft Material 3 variant. Also skip if your team doesn’t have a strong art director, because neo-brutalism unsupervised quickly turns into visual noise.
See also
Figma UI Kits & Components
Neo Brutalism UI Library
This is the kit I reach for first when prototyping a neo-brutalist screen because the component coverage is unusually deep for a free Figma file. You get buttons, inputs, cards, modals, navigation, tables, and dashboard widgets — all built with proper Figma variants and auto-layout. The shadow tokens are consistent across components, which is what most “free brutalist kits” get wrong.
The library uses a constrained palette of bright primaries against off-white, with the signature hard 4px black borders and offset shadows. Variants exist for hover and active states, so you can build click-through prototypes without rebuilding components.
Key Features:
- 200+ components with full variant coverage
- Auto-layout configured on every container
- Consistent 4px border + 6px offset shadow tokens
- Dashboard, e-commerce, and marketing components in one file
Best For: Designers prototyping a full neo-brutalist product before handing off to developers.
Pricing: Free
Real-World Note: The kit uses Figma variables for color, so if you change the primary token, the whole kit retints — useful, but it means you can’t have multiple accent colors coexisting without duplicating components.
NeoBrutalism Web Components
This is the Figma counterpart to the Retro UI React library, which makes it the most useful Figma kit for teams who actually plan to build with code. The components map 1:1 to the Retro UI React props, so a designer can hand a screen to a developer and the dev can rebuild it with <Button variant="default" /> and have it match.
The visual style is slightly more restrained than the standalone Neo Brutalism UI Library — more usable for actual product work, less “Instagram screenshot” energy.
Key Features:
- 1:1 parity with Retro UI React components
- Form controls, navigation, overlays, and data display
- Light and dark mode variants
- Includes a typography scale that matches the code
Best For: Teams using Retro UI in code who want their Figma library to match exactly.
Pricing: Free
Real-World Note: If you’re not using Retro UI in code, this kit is overkill — the design-to-code parity is the whole point, and you’ll get better visual variety from the Neo Brutalism UI Library.
Neobrutalism E-commerce UI Kit
A focused kit covering the screens an e-commerce site actually needs: product grid, product detail, cart, checkout, account, order confirmation. The product cards lean hard into the neo-brutal style with thick borders and chunky add-to-cart buttons, which works surprisingly well for fashion or boutique brands and falls apart for anything that needs to feel premium or minimal.
The checkout flow is the standout — most free e-commerce kits skip the boring screens, and this one actually has form states, validation errors, and a payment step.
Key Features:
- Complete checkout flow including error states
- Product detail with image gallery and variant selectors
- Cart drawer and full cart page variants
- Account dashboard screens included
Best For: Indie e-commerce brands, drop-shipping stores, or Shopify themes that want personality.
Pricing: Free
Real-World Note: The kit doesn’t include search results or filter UI — you’ll need to design those yourself, which is the actual hard part of e-commerce design.
Neobrutalism Magazine Figma Template
A magazine layout template rather than a component kit — useful if you’re designing a publication, blog, or content-heavy site. The grid is editorial-style with mixed typography weights and asymmetric column widths, which is the kind of layout you’d struggle to build cleanly with a normal UI library.
Key Features:
- Editorial grid with asymmetric columns
- Article, category, and homepage layouts
- Display typography scale included
- Color palette built for high-contrast reading
Best For: Designers working on editorial sites, blogs, or content publications.
Pricing: Free
Real-World Note: The download is gated behind a free account at freedesignresources.net — minor friction but not a paywall.
Free Sweepy Website Design UI Kit
A marketing-site kit with hero sections, feature blocks, pricing tables, and testimonial layouts. The style is softer than most neo-brutalist kits — borders are present but less aggressive — which makes it easier to use for SaaS landing pages that need to be playful without scaring off enterprise visitors.
Key Features:
- 12 pre-built marketing sections
- Three hero variants with different content patterns
- Pricing and feature comparison tables
- Auto-layout throughout
Best For: SaaS marketing pages that want personality without going full brutalist.
Pricing: Free
Real-World Note: Components aren’t tokenized — change one color and you’ll be hunting through layers.
Neobrutalism UI components
A smaller component-focused kit (no full screens) covering the basics: buttons, inputs, cards, alerts, modals. Useful as a starting point when you want to build screens yourself rather than starting from a template.
Key Features:
- Form controls with focus and error states
- Card variants for different content types
- Three button sizes with hover variants
- Clean variant naming
Best For: Designers who want components only and prefer to compose screens from scratch.
Pricing: Free
Real-World Note: Coverage is thinner than the main Neo Brutalism UI Library, but if all you need is buttons and cards, the smaller file loads faster in Figma.
Neubrutalism UI
One of the older kits on this list, and you can tell from the styling — it leans heavier on yellow and pink than newer kits. Still useful as a reference for how the style has evolved, and the components are solid.
Key Features:
- Buttons, inputs, and card components
- Original “loud” neo-brutalist palette
- Includes a small icon set
Best For: Anyone who wants the older, more aggressive neo-brutal look rather than the toned-down 2026 version.
Pricing: Free
Real-World Note: Last updated a while ago — variants aren’t as cleanly named as in newer kits.
React & Next.js Libraries
NeoBrutalism Components
This is the React library I recommend by default for neo-brutalist projects, and it’s not close. The components are built on Radix primitives, styled with Tailwind, and ship with TypeScript types out of the box. Which means you get accessibility for free — keyboard navigation, focus management, ARIA — and you don’t have to fight the library to make it work in a real product.
The component coverage is what you’d expect from a shadcn/ui-style library: buttons, dialogs, dropdowns, forms, tables, navigation. Installation is the shadcn pattern (copy-paste into your project, own the code), which means you can customize anything without forking.
The documentation is genuinely good — every component has a working playground, prop documentation, and code snippets you can copy directly.
Key Features:
- Built on Radix UI primitives for accessibility
- shadcn-style installation (you own the code)
- Full TypeScript support with exported types
- Dark mode out of the box
- Customizable via Tailwind theme tokens
Best For: React or Next.js production apps where you need a neo-brutal style but can’t compromise on accessibility or maintainability.
Pricing: Free
Real-World Note: Because components are copy-pasted into your project, you don’t get version updates automatically — when the library improves, you have to manually pull in the new code. This is a feature, not a bug, but plan for it.
Retro UI
Retro UI sits next to NeoBrutalism Components as the other serious React option. The visual style is slightly more retro/playful (think early-90s computer interfaces) versus NeoBrutalism’s cleaner approach. Same installation model — copy-paste into your Next.js project — and similar component coverage.
The advantage of Retro UI is the matching Figma kit (listed earlier), which makes design-to-code handoff cleaner than NeoBrutalism Components if you have designers on the team.
Key Features:
- Matching Figma library for design parity
- Tailwind-based with theme variables
- Form, navigation, overlay, and feedback components
- Active maintenance and frequent updates
Best For: Teams where designers work in Figma and developers need exact code parity.
Pricing: Free
Real-World Note: Smaller community than NeoBrutalism Components, so fewer Stack Overflow answers when you hit edge cases.
Brutalist UI
A newer entry with a focus on raw, harder-edged brutalism — less polished, more “1995 GeoCities” energy. Coverage is narrower than the two libraries above, but if you want something that looks distinctly different from the increasingly homogeneous neo-brutalist style, this is it.
Key Features:
- Distinctive harsh aesthetic
- Tailwind-based
- Core component set (buttons, cards, forms)
- Active development
Best For: Indie projects, art portfolios, or anyone tired of every neo-brutalist site looking the same.
Pricing: Free
Real-World Note: Component coverage is still expanding — check the current component list before committing to it for a real project.
Neobrutalism Components (Shadcn Template)
A community template that ports the shadcn/ui component set into a neo-brutalist style. If you’ve already built with shadcn and want to retheme, this is the fastest path — same API, same imports, different visuals.
Key Features:
- Drop-in shadcn/ui replacement
- All standard shadcn components included
- MIT licensed
- Theme via CSS variables
Best For: Existing shadcn/ui projects that want to switch to a neo-brutal look without rewriting components.
Pricing: Free
Real-World Note: Maintained by a community member, not the official shadcn team — check the last commit date before relying on it.
Tailwind CSS Templates and Libraries
Neo-Brutalism UI Library (Vercel)
A pure HTML + Tailwind component reference site. Components aren’t packaged as a library — you copy the markup from the documentation and paste it into your project. Which sounds primitive, but for projects that don’t need React (marketing sites, landing pages, static blogs), it’s actually faster than installing a component library.
Coverage is solid: buttons, forms, cards, navigation, alerts, badges. The Tailwind config is documented separately so you can copy the custom shadow utilities and color tokens into your own project.
Key Features:
- HTML + Tailwind, no JavaScript framework required
- Copy-paste documentation pattern
- Custom Tailwind config provided
- Light and dark variants
Best For: Static sites, Astro projects, Eleventy builds, or anywhere you don’t need React.
Pricing: Free
Real-World Note: The custom shadow utilities require extending your Tailwind config — if you skip that, the components will render without the signature offset shadows.
Neo Brutalism Page – TailwindFlex
A single full-page Tailwind template rather than a component library. Useful as a starting point or for studying how the style is composed at page level. Good for hackathon projects or quick landing pages.
Key Features:
- Complete landing page template
- Hero, features, pricing, footer included
- Pure Tailwind, no framework
- View source directly in browser
Best For: Quick landing page builds where you’d rather start from a working page than assemble components.
Pricing: Free
Real-World Note: It’s one page, not a system — don’t expect it to scale to a multi-screen app.
Neobrutalism Blog Template
A complete blog template with Tailwind, ready to fork. Includes article pages, category listings, and a homepage. Good starting point for a personal blog or developer publication.
Key Features:
- Blog homepage, article, and category templates
- Tailwind-based
- MIT licensed, fork-friendly
- Includes typography styles for long-form content
Best For: Developers launching a personal blog who want to fork and ship.
Pricing: Free
Real-World Note: Pair this with a CMS or markdown-based stack — the template is static HTML on its own.
Neobrutal UI
A growing component library on GitHub. Smaller than the bigger named libraries above, but the components are clean and the code is readable, which makes it useful as a learning reference even if you don’t use it directly.
Key Features:
- Open-source, MIT licensed
- Tailwind-based components
- Clean, readable source code
Best For: Learning how neo-brutal components are built, or starter projects with simple needs.
Pricing: Free
Real-World Note: Component count is limited — check the repo before assuming it covers what you need.
Riddle UI – Neo Brutalism Design System (Framer)
A Framer-based design system rather than a code library. If you build sites in Framer, this drops in directly and gives you a full neo-brutal kit without leaving the tool.
Key Features:
- Native Framer components
- Drop-in for Framer sites
- Includes layout templates
- Built for Framer’s design-to-publish workflow
Best For: Designers using Framer for client work.
Pricing: Free
Real-World Note: Useless outside Framer — this is not portable to Webflow, Figma, or code.
NeoBruu – Type-Safe React and Tailwind Components
A TypeScript-first component library focused on type safety. Smaller component set than the bigger libraries, but the types are well-defined and the API is clean.
Key Features:
- TypeScript-first with full type exports
- Tailwind-based styling
- Small, focused component set
Best For: TypeScript projects where you’d rather have fewer, better-typed components than a sprawling library.
Pricing: Free
Real-World Note: Coverage is narrower than NeoBrutalism Components — verify the components you need exist before committing.
Dashboard & Admin Templates
Brutalism – Neo Brutalist Dashboard
The best free neo-brutalist dashboard template I’ve found. Includes the screens admin panels actually need — overview with stats, data tables, charts, settings, forms — built with Tailwind. The neo-brutal styling is dialed in just enough to have personality without making the dashboard hard to scan.
Key Features:
- Complete admin layout with sidebar nav
- Stat cards, data tables, and chart placeholders
- Settings and form screens included
- Responsive layout out of the box
Best For: SaaS dashboards that want a personality beyond the default shadcn look.
Pricing: Free + Pro (Free plan includes the full template; Pro unlocks additional templates across other styles.)
Real-World Note: Chart placeholders are images, not working charts — wire up Recharts or Chart.js yourself.
RecehTok — Crypto Exchange Dashboard (Figma)
A dark-mode crypto exchange dashboard in Figma. The neo-brutal styling is applied lightly — borders and offset shadows on cards — which actually works better for data-heavy screens than full brutalism would.
Key Features:
- Crypto-focused dashboard layout
- Dark mode native
- Trading and portfolio screens
- Real-time-feel data visualizations
Best For: Designers building crypto, fintech, or trading dashboards.
Pricing: Free
Real-World Note: Figma file only — no code version exists, you’ll be implementing from scratch.
React 19 Neo-Brutalist Dashboard
A working React 19 dashboard implementation. Code rather than a template — fork it, modify it, deploy it. Useful as a reference for how to structure a real neo-brutal admin in React.
Key Features:
- React 19 codebase
- Working dashboard with state management
- MIT licensed
- Active repository
Best For: Developers who’d rather start from working code than rebuild a template from a screenshot.
Pricing: Free
Real-World Note: Verify dependencies before merging into a production project — early React 19 projects often have rough edges.
NeoBrutalism Admin Dashboard UI Kit (figma)
17 screens of admin/dashboard design in Figma. Useful if you need design coverage beyond just an overview page — includes user management, settings, billing, and analytics screens.
Key Features:
- 17 distinct admin screens
- User, billing, analytics flows included
- Figma variants for states
- Light mode focused
Best For: Designers scoping a full admin product, not just one dashboard.
Pricing: Free
Real-World Note: Light mode only — if you need dark mode, you’ll be rebuilding.
Portfolio Templates
Neobrutalism Portfolio Template
A clean portfolio template with project showcase, about, and contact sections. Tailwind-based, easy to fork and personalize.
Key Features:
- Project showcase grid
- About and contact sections
- Tailwind-based
- Fork-friendly structure
Best For: Developers and designers who want a portfolio they can launch in an evening.
Pricing: Free
Real-World Note: Default content is placeholder — budget an hour for content swap-out.
Windowed Portfolio Tailwind Template
A more distinctive portfolio variant using a “windowed” panel layout inspired by classic operating system UIs. Visually stronger than the standard portfolio template — better choice if you want your site to stand out in a sea of generic developer portfolios.
Key Features:
- Window-pane layout aesthetic
- Tailwind-based
- Distinctive visual identity
- Project showcase included
Best For: Designers who want visual personality over conventional structure.
Pricing: Free
Real-World Note: The windowed layout takes more content to fill — sparse portfolios will feel empty.
Neobrutalism Bento Template
A bento-grid portfolio in the neo-brutal style. Bento layouts are well-suited to the style — the hard borders define the grid naturally — and this template executes the pattern cleanly.
Key Features:
- Bento grid layout
- Tailwind-based
- Modular section components
- Easy content swap
Best For: Portfolios where you want to surface multiple project types or content categories at once.
Pricing: Free
Real-World Note: Bento layouts demand strong content — if your project thumbnails are weak, the layout amplifies it.
Brutalist – Neubrutalism Portfolio Tailwind Css
A Gumroad-distributed Tailwind portfolio template. Comes with documentation and a slightly more polished aesthetic than the open-source GitHub templates.
Key Features:
- Tailwind-based template
- Includes documentation
- Distributed via Gumroad
Best For: Designers who prefer a packaged download with docs over a raw GitHub fork.
Pricing: Free
Real-World Note: Free on Gumroad currently — confirm pricing on the product page before assuming.
Design Systems & Foundations
Neubrutalism Design System
A tokenized design system file with documented color tokens, type scale, spacing, and shadow tokens. Useful as the source-of-truth file when multiple designers on a team are building neo-brutal screens and you need consistency.
Key Features:
- Documented color, type, and shadow tokens
- Spacing scale defined
- Component foundations included
- Built for team use
Best For: Teams setting up a shared design system from scratch.
Pricing: Free
Real-World Note: This is the foundations file — you’ll still need component coverage from another kit on top of it.
Neo Brutalism Theme for shadcn/ui
A theme file (not a component library) that restyles shadcn/ui components with neo-brutalist tokens. The fastest way to add neo-brutalism to an existing shadcn project — drop in the theme, restart dev server, done.
Key Features:
- Theme tokens only, no component changes
- Drops into existing shadcn/ui projects
- CSS variable based
- Light and dark variants
Best For: Existing shadcn projects that want a neo-brutal skin without swapping components.
Pricing: Free
Real-World Note: Doesn’t restyle every shadcn component perfectly — expect to do some manual tweaking on edge cases like Command and Sheet.
Brutalism Desingn System Mini Kit
A compact starter design system file. Smaller scope than the Neubrutalism Design System above — useful when you want foundations without the overhead of a full system.
Key Features:
- Core color and type tokens
- Basic component shells
- Lightweight Figma file
- Easy to extend
Best For: Solo designers or small projects where a full design system is overkill.
Pricing: Free
Real-World Note: “Mini” is accurate — don’t expect full component coverage.
CSS Libraries and Frameworks
Neo-Brutalism CSS Library
A pure CSS library — no Tailwind, no React, no build step. Drop the stylesheet into any HTML page and start using class-based components. The best option for vanilla projects, server-rendered apps in PHP or Ruby, or anywhere you can’t (or don’t want to) add a build pipeline.
Key Features:
- Single CSS file, no dependencies
- Class-based component system
- Works with any framework or no framework
- MIT licensed
Best For: Server-rendered apps, static HTML projects, or any context without a JS build step.
Pricing: Free
Real-World Note: No JavaScript means no interactive components like modals or dropdowns — you’ll write that logic yourself.
NeoBrutalismCSS Framework
Another vanilla CSS option. Smaller and more focused than the library above — useful if you want a minimal stylesheet rather than a full framework.
Key Features:
- Minimal CSS footprint
- Class-based components
- No build step required
- Open source
Best For: Projects where you want neo-brutal styling without bringing in a full framework.
Pricing: Free
Real-World Note: Coverage is intentionally narrow — check the README for the component list before committing.
Neubrutalism Minimalist CSS Library
A minimalist CSS library leaning toward the cleaner end of the neo-brutal spectrum. Less aggressive shadows, more restraint.
Key Features:
- Minimalist neo-brutal aesthetic
- Pure CSS
- Lightweight stylesheet
- MIT licensed
Best For: Projects that want the structure of neo-brutalism without the loud personality.
Pricing: Free
Real-World Note: “Minimalist” means fewer component options — check coverage before depending on it.
Misc, Blogs & Inspiration
Neobrutalism Web Design Examples
A curated gallery of live neo-brutalist sites. Useful for inspiration and for seeing how the style holds up in real production contexts rather than dribbble shots.
Key Features:
- 20+ live site examples
- Variety of industries
- Live links to each site
- Visual reference, not a kit
Best For: Pulling visual references before starting a project.
Pricing: Free
Real-World Note: Some linked sites may have rebranded since the article was published — broken links are normal in inspiration roundups.
Building a Retro Neo-Brutalist UI Library with Astro
A tutorial walking through how to build a neo-brutalist component library from scratch in Astro. Useful if you want to understand the construction rather than just consume a finished library.
Key Features:
- Step-by-step tutorial format
- Astro-specific approach
- Code samples included
- Explains the CSS techniques behind the style
Best For: Developers who want to build their own neo-brutal components in Astro instead of importing one.
Pricing: Free
Real-World Note: Astro-specific — most of it transfers, but you’ll adapt for React or Vue.
How to Choose the Right Neo Brutalism UI Kit
Three criteria actually matter when picking from this list, and they’re not “which one looks best.”
First, match the kit to your stack. If you’re shipping React, NeoBrutalism Components or Retro UI are the only sensible defaults — anything else means rebuilding components. If you’re on plain HTML, the CSS-only libraries beat copying React components into your project. Tailwind-only projects sit in the middle and have the most options.
Second, decide if you need full design coverage or just code coverage. If you have designers on the team, prioritize kits with both a Figma file and a matching code library (Retro UI is the cleanest pairing). If you’re solo and code-first, pick a code library directly and skip Figma.Third, check the maintenance signal. Recent commits matter — neo-brutalism is a trending style, which means a lot of kits get published and abandoned. Open the GitHub repo, check the last commit, and skip anything that’s gone quiet for over a year.
Frequently Asked Questions
What is a neo brutalism UI kit?
A neo brutalism UI kit is a collection of pre-built design components — buttons, forms, cards, navigation — styled in the neo-brutalist style, which is defined by hard borders, flat colors, offset drop shadows, and a deliberate rejection of soft gradients or subtle effects. Kits ship as Figma files for designers or code libraries (React, Tailwind, CSS) for developers.
Is there a free neo brutalism UI kit for Figma?
Yes — the Neo Brutalism UI Library on Figma Community is the deepest free option, with full component coverage and proper variants. For teams using Retro UI in code, the NeoBrutalism Web Components Figma file gives 1:1 design-code parity. Both are free with no account required.
Is there a neo brutalism UI kit for SaaS dashboards?
The Brutalism template on TailKits is the strongest free option for SaaS dashboards specifically — it includes the stat cards, data tables, and admin screens that real products need. The React 19 Neo-Brutalist Dashboard is a code-first alternative if you’d rather start from working React than convert a static template.
What’s the best neo brutalism React library?
NeoBrutalism Components (neobrutalism.dev) is the default recommendation because it’s built on Radix UI primitives, ships with TypeScript types, and uses the shadcn copy-paste installation model that gives you full ownership of the code. Retro UI is the strongest alternative, particularly if your team needs matching Figma assets.
Conclusion
Start with NeoBrutalism Components if you’re shipping React — it’s the most accessible, best-documented, and most actively maintained option, and the shadcn-style install means you own the code. For design work before code, the Neo Brutalism UI Library on Figma Community is the obvious starting point and pairs cleanly with any of the code libraries.
If you’re working in plain HTML or any non-React stack, Neo-Brutalism CSS by Walikuperek skips the build-step overhead and just works. And for teams setting up a shared system, the Neubrutalism Design System Figma file gives you tokenized foundations to build on.
Bookmark this list — the neo-brutalism space is moving fast, and most of these kits are getting active updates. Try one or two free before committing your project to the style.
