# ekmas/neobrutalism-components

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ekmas-neobrutalism-components).**

4,956 stars · 166 forks · TypeScript · mit

## Links

- GitHub: https://github.com/ekmas/neobrutalism-components
- Homepage: https://neobrutalism.dev
- awesome-repositories: https://awesome-repositories.com/repository/ekmas-neobrutalism-components.md

## Topics

`neobrutalism` `neobrutalism-components` `nextjs` `react` `react-component-library` `react-components` `react-typescript` `react-ui-components` `shadcn` `shadcn-components` `shadcn-theme` `shadcn-ui` `tailwind` `ui-library`

## Description

This project is a neobrutalist UI component library and accessible design system for React. It provides a collection of high-contrast web elements characterized by bold colors, thick borders, and a raw aesthetic.

The library distinguishes itself by combining a data visualization toolkit—featuring styled charts and responsive tables—with a comprehensive set of interactive components. It balances this specific visual style with accessibility standards for keyboard navigation and screen readers.

The component surface covers a wide range of functional areas, including complex form controls with validation, layout containers such as modals and resizable panels, navigation systems like command menus and breadcrumbs, and motion elements for feedback and progress.

The project is built with TypeScript and utilizes Tailwind CSS and headless UI integration for its styling and behavioral logic.

## Tags

### User Interface & Experience

- [Aesthetic Theme Implementations](https://awesome-repositories.com/f/user-interface-experience/aesthetic-theme-implementations.md) — Implements a neobrutalist aesthetic theme featuring bold colors and high-contrast borders. ([source](https://www.neobrutalism.dev/docs))
- [Accessible Interface Design](https://awesome-repositories.com/f/user-interface-experience/accessible-interface-design.md) — Ensures all UI controls follow accessibility standards for keyboard navigation and screen readers.
- [Checkbox Components](https://awesome-repositories.com/f/user-interface-experience/checkbox-components.md) — Includes styled two-state checkbox inputs following a neobrutalist aesthetic. ([source](https://www.neobrutalism.dev/docs/checkbox))
- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Provides a comprehensive library of reusable interface elements built specifically for the React ecosystem.
- [Data Visualization Interfaces](https://awesome-repositories.com/f/user-interface-experience/data-visualization-interfaces.md) — Includes a toolkit for presenting complex datasets through styled charts and responsive tables.
- [Form Validation](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/form-validation.md) — Includes mechanisms for verifying that user input meets specified criteria before form submission. ([source](https://www.neobrutalism.dev/docs/form))
- [Label and Control Association](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/standard-input-controls/label-and-control-association.md) — Implements proper association between text labels and input controls to ensure screen reader accessibility. ([source](https://www.neobrutalism.dev/docs/label))
- [Toggle Switches](https://awesome-repositories.com/f/user-interface-experience/form-input-components/toggle-switches.md) — Ships binary toggle switch components as an alternative to checkboxes for enabling settings. ([source](https://www.neobrutalism.dev/docs/switch))
- [Generic Button Components](https://awesome-repositories.com/f/user-interface-experience/generic-button-components.md) — Provides interactive high-contrast button components with configurable styles and states. ([source](https://www.neobrutalism.dev/docs/button))
- [High-Contrast User Interfaces](https://awesome-repositories.com/f/user-interface-experience/high-contrast-user-interfaces.md) — Develops user interfaces with strong visual separation and accessible components for a distinctive look.
- [Select Inputs](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs/select-inputs.md) — Provides styled dropdown select inputs for choosing values from a provided list. ([source](https://www.neobrutalism.dev/docs/select))
- [Plain Text Input Fields](https://awesome-repositories.com/f/user-interface-experience/plain-text-input-fields.md) — Implements high-contrast plain text input fields for single-line user data collection. ([source](https://www.neobrutalism.dev/docs/input))
- [Radio Groups](https://awesome-repositories.com/f/user-interface-experience/radio-groups.md) — Provides radio group components for managing mutually exclusive single-choice selections. ([source](https://www.neobrutalism.dev/docs/radio-group))
- [Textarea Components](https://awesome-repositories.com/f/user-interface-experience/textarea-components.md) — Provides multi-line textarea components with high-contrast borders for long-form input. ([source](https://www.neobrutalism.dev/docs/textarea))
- [Avatar Components](https://awesome-repositories.com/f/user-interface-experience/avatar-components.md) — Ships accessible avatar components for displaying user profile images or placeholders. ([source](https://www.neobrutalism.dev/docs/avatar))
- [Breadcrumb Navigations](https://awesome-repositories.com/f/user-interface-experience/breadcrumb-navigations.md) — Provides interface elements that display and allow traversal of hierarchical page paths. ([source](https://www.neobrutalism.dev/docs/breadcrumb))
- [Collapsible Panels](https://awesome-repositories.com/f/user-interface-experience/collapsible-panels.md) — Provides interactive UI panels that can be expanded or collapsed to organize content. ([source](https://www.neobrutalism.dev/docs/collapsible))
- [Combobox Components](https://awesome-repositories.com/f/user-interface-experience/combobox-components.md) — Offers autocomplete combobox components that combine text input with a selectable dropdown. ([source](https://www.neobrutalism.dev/docs/combobox))
- [Command Palettes](https://awesome-repositories.com/f/user-interface-experience/command-palettes.md) — Ships a searchable, keyboard-driven menu for quick action execution and application navigation. ([source](https://www.neobrutalism.dev/docs/command))
- [Content Carousels](https://awesome-repositories.com/f/user-interface-experience/content-display-components/content-carousels.md) — Ships interactive components that cycle through a series of visual elements with motion effects. ([source](https://www.neobrutalism.dev/docs/carousel))
- [Context Menus](https://awesome-repositories.com/f/user-interface-experience/context-menus.md) — Implements a list of actions that appears when a user triggers a specific interaction like a right-click. ([source](https://www.neobrutalism.dev/docs/context-menu))
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Implements a global theming system using CSS variables to manage primary colors and border widths across all components.
- [Accordion Panels](https://awesome-repositories.com/f/user-interface-experience/data-display-components/accordion-panels.md) — Includes collapsible accordion panels to organize and hide content sections. ([source](https://www.neobrutalism.dev/docs/accordion))
- [Content Cards](https://awesome-repositories.com/f/user-interface-experience/data-display-components/content-cards.md) — Ships high-contrast containers that organize related information into distinct header, body, and footer sections. ([source](https://www.neobrutalism.dev/docs/card))
- [Data Table Components](https://awesome-repositories.com/f/user-interface-experience/data-table-components.md) — Includes structured data table components for presenting tabular information within web interfaces. ([source](https://www.neobrutalism.dev/docs/data-table))
- [Input Control Sets](https://awesome-repositories.com/f/user-interface-experience/data-tables/data-entry-forms/complex-form-layouts/input-control-sets.md) — Provides complex interactive input systems including date pickers and validated OTP fields.
- [Date Pickers](https://awesome-repositories.com/f/user-interface-experience/date-pickers.md) — Provides a calendar popup interface for browsing and selecting specific dates. ([source](https://www.neobrutalism.dev/docs/date-picker))
- [Range Selection](https://awesome-repositories.com/f/user-interface-experience/date-pickers/range-selection.md) — Implements a date range picker for selecting spans of time between two dates. ([source](https://www.neobrutalism.dev/docs/calendar))
- [Alert Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs/alert-dialogs.md) — Provides blocking alert dialogs that require a mandatory user response to proceed. ([source](https://www.neobrutalism.dev/docs/alert-dialog))
- [Modal Overlays](https://awesome-repositories.com/f/user-interface-experience/modal-overlays.md) — Implements modal windows that present focused content in a layer above the main application. ([source](https://www.neobrutalism.dev/docs/dialog))
- [Multi-Select Inputs](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs.md) — Provides searchable multi-select inputs that allow choosing one or more options from a list. ([source](https://www.neobrutalism.dev/docs/combobox))
- [Navigation Bars](https://awesome-repositories.com/f/user-interface-experience/navigation-components/navigation-bars.md) — Ships a responsive, high-contrast navigation bar for primary site-wide links and branding. ([source](https://www.neobrutalism.dev/docs/menubar))
- [Pagination Controls](https://awesome-repositories.com/f/user-interface-experience/navigation-components/pagination-controls.md) — Provides styled pagination controls to navigate through large datasets across discrete pages. ([source](https://www.neobrutalism.dev/docs/pagination))
- [Navigation Menus](https://awesome-repositories.com/f/user-interface-experience/navigation-menus.md) — A structured collection of links and dropdowns to help users move through different sections of a site. ([source](https://www.neobrutalism.dev/docs/navigation-menu))
- [Notification Toasts](https://awesome-repositories.com/f/user-interface-experience/notification-toasts.md) — Implements transient UI elements for displaying system messages with severity-based styling. ([source](https://www.neobrutalism.dev/docs/sonner))
- [OTP Inputs](https://awesome-repositories.com/f/user-interface-experience/password-input-fields/otp-inputs.md) — Ships accessible OTP input fields with segmented character boxes for authentication codes. ([source](https://www.neobrutalism.dev/docs/input-otp))
- [Popovers](https://awesome-repositories.com/f/user-interface-experience/popovers.md) — Ships contextual overlays triggered by user interaction to provide additional information. ([source](https://www.neobrutalism.dev/docs/popover))
- [Progress Indicators](https://awesome-repositories.com/f/user-interface-experience/progress-indicators.md) — Provides visual components for displaying task completion percentages and loading states. ([source](https://www.neobrutalism.dev/docs/progress))
- [Range Sliders](https://awesome-repositories.com/f/user-interface-experience/range-sliders.md) — Includes high-contrast range sliders for selecting numerical values or ranges. ([source](https://www.neobrutalism.dev/docs/slider))
- [Resizable Panes](https://awesome-repositories.com/f/user-interface-experience/resizable-panes.md) — Provides interactive split-pane layouts that users can resize via dragging or keyboard input. ([source](https://www.neobrutalism.dev/docs/resizable))
- [Slide-Out Panels](https://awesome-repositories.com/f/user-interface-experience/slide-out-panels.md) — Provides UI panels that slide from the screen edge to offer contextual options. ([source](https://www.neobrutalism.dev/docs/sheet))
- [Utility-First Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/utility-first-styling.md) — Uses a utility-first styling approach via Tailwind CSS to apply bold colors and high-contrast borders.
- [Tabbed Interfaces](https://awesome-repositories.com/f/user-interface-experience/tabbed-interfaces.md) — Implements components for organizing content into switchable tabbed views. ([source](https://www.neobrutalism.dev/docs/tabs))
- [Responsive Layouts](https://awesome-repositories.com/f/user-interface-experience/table-components/responsive-layouts.md) — Provides tables with responsive layouts that adapt their display based on screen size. ([source](https://www.neobrutalism.dev/docs/table))
- [Tooltips](https://awesome-repositories.com/f/user-interface-experience/tooltips.md) — Provides contextual information overlays that appear on hover or focus. ([source](https://www.neobrutalism.dev/docs/tooltip))
- [Menu Components](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/menu-components.md) — Provides high-contrast menu components for accessing additional actions and navigation options. ([source](https://www.neobrutalism.dev/docs/dropdown-menu))
- [Interactive Visualization Toolkits](https://awesome-repositories.com/f/user-interface-experience/visualization-primitive-toolkits/interactive-visualization-toolkits.md) — Provides a toolkit of interactive charts and tables for representing complex datasets.

### Web Development

- [Component Libraries](https://awesome-repositories.com/f/web-development/component-libraries.md) — Ships a collection of reusable, modular UI building blocks for web applications.
- [Neobrutalist Aesthetics](https://awesome-repositories.com/f/web-development/frontend-development-resources/motion-design-frameworks/high-fidelity-ui-aesthetics/high-saturation-aesthetics/neobrutalist-aesthetics.md) — Implements a raw neobrutalist aesthetic featuring bold colors, thick borders, and heavy shadows.
- [Neobrutalist Component Collections](https://awesome-repositories.com/f/web-development/ui-component-libraries/neobrutalist-component-collections.md) — Offers a collection of high-contrast web elements featuring bold colors and thick borders.

### Part of an Awesome List

- [Charts and Visualization](https://awesome-repositories.com/f/awesome-lists/data/charts-and-visualization.md) — Ships libraries for rendering a variety of charts and interactive data visualizations. ([source](https://www.neobrutalism.dev/docs/chart))

### Software Engineering & Architecture

- [Headless Component Logic](https://awesome-repositories.com/f/software-engineering-architecture/logic-and-presentation-separation/headless-component-logic.md) — Utilizes headless UI patterns to separate behavioral and accessibility logic from the custom neobrutalist visual layer.