Neobrutalist UI. Unapologetically bold.
The component library built for neobrutalist design. 80+ accessible Radix primitives with hard shadows, bold borders, and zero configuration.
$ npm install @mikenotthepope/substrateuinpm i @mikenotthepope/substrateuiGet started in seconds
Install the package, import the styles, and use any component.
Add the dependency
"dependencies": { "@mikenotthepope/substrateui": "latest" }Import styles
import "@mikenotthepope/substrateui/styles"Use components
import { Button } from "@mikenotthepope/substrateui"
Why Substrate UI?
Built for developers who want strong visual identity without sacrificing accessibility or developer experience.
Radix Primitives
Every interactive component wraps a Radix UI primitive for keyboard navigation, screen reader support, and WAI-ARIA compliance out of the box.
Neobrutalist Design
Hard shadows, bold borders, and sharp corners create a distinctive visual identity that stands out. Rounded corners available via opt-in.
Tailwind CSS v4
Styled with CSS custom properties and Tailwind v4. No Tailwind config needed — just import one CSS file and go.
Dark Mode
Full light and dark theme support via CSS custom properties. Seamless switching with no flash of unstyled content.
TypeScript First
Every component is fully typed with strict TypeScript. Autocomplete for all props, variants, and event handlers.
Copy & Customize
Use the npm package for quick setup, or copy individual components into your project for full control.
Start Here
A hand-picked selection of our most popular components and full-page demos.
Button
Clickable action with size and variant options.
Dialog
Modal dialog with header, body, footer, and overlay.
Radix DialogDataTable
Feature-rich table with sorting, filtering, and pagination.
TanStack TableCommand
Searchable command palette for actions and navigation.
cmdkNavBar
Responsive navigation with auth states and mobile drawer.
Calendar
Date picker with single, multiple, and range selection.
react-day-pickerFull-page Demos
Primitives (25)
Small, composable building blocks.
Avatar
User photo with fallback initials.
Radix AvatarBadge
Small status label with color variants and retro styling.
Button
Clickable action with size and variant options.
Card
Container with header, body, and footer slots.
IconButton
Icon-only button with retro shadow, sized to fit SVG icons.
Link
Styled anchor with variant support and asChild for Next.js Link.
Loader
Bouncing dots loader with configurable count and speed.
Text
Typography primitives for headings, body, small text, and code.
Menu
Dropdown menu for contextual actions.
RadixTabs
Tabbed interface with overflow dropdown.
Radix TabsAccordion
Collapsible content sections for FAQs and grouped info.
Radix AccordionBreadcrumb
Navigation trail showing the current page hierarchy.
Collapsible
Toggle visibility of a content section.
Radix CollapsibleContextMenu
Right-click menu with nested items and shortcuts.
Radix Context MenuDropdownMenu
Full-featured dropdown with checkboxes, radios, and submenus.
Radix Dropdown MenuHoverCard
Popup card triggered by hovering over an element.
Radix Hover CardImageCard
Card with image, title, and description for media content.
Marquee
Scrolling horizontal content for logos or announcements.
Menubar
Desktop-style menu bar with nested dropdowns.
Radix MenubarNavigationMenu
Site navigation with dropdown panels and indicators.
Radix Navigation MenuPopover
Floating panel anchored to a trigger element.
Radix PopoverProgress
Visual indicator of completion or loading progress.
Radix ProgressScrollArea
Custom scrollbar container for overflowing content.
Radix Scroll AreaSkeleton
Placeholder loading animation for content.
Tooltip
Brief informational popup on hover or focus.
Radix TooltipForm (13)
Inputs, selects, and controls for collecting data.
Alert
Contextual feedback with semantic status colors and composable title/description.
Input
Text input supporting all standard HTML input types.
Textarea
Multi-line text input for longer content.
Checkbox
Toggle a single option on or off.
Radix CheckboxRadioGroup
Select one option from a set.
Radix Radio GroupSelect
Dropdown picker for choosing from a list.
Radix SelectSwitch
Binary toggle for on/off settings.
Radix SwitchSlider
Range input for selecting numeric values.
Radix SliderCalendar
Date picker with single, multiple, and range selection.
react-day-pickerCombobox
Searchable dropdown with filtering and multi-select.
Command
Searchable command palette for actions and navigation.
cmdkForm
Form wrapper with validation, labels, and error messages.
react-hook-formInputOTP
One-time password input with grouped digit slots.
input-otpLayout (23)
Page structure and responsive containers.
CardGrid
Responsive grid for cards with configurable columns.
Container
Centered, max-width wrapper with responsive horizontal padding.
Dialog
Modal dialog with header, body, footer, and overlay.
Radix DialogDivider
Horizontal or vertical separator with optional label.
Drawer
Slide-in panel from the left or right edge.
Flex
General-purpose flexbox container with direction, wrap, and gap.
FormLayout
Form shell with sections, field wrappers, inline rows, and action bar.
Grid
CSS grid layout with configurable column count and gap.
NavBar
Responsive navigation with auth states and mobile drawer.
SectionNav
Sticky horizontal anchor navigation between page sections.
SimplePage
Page shell with header, title, actions slot, and content area.
Stack
Vertical or horizontal flex layout with consistent spacing.
TwoColumnLayout
Side-by-side panels on desktop, drawer on mobile.
AlertDialog
Confirmation dialog for destructive or important actions.
Radix Alert DialogCarousel
Swipeable content carousel with prev/next controls.
Embla CarouselChart
Themed chart container for recharts visualizations.
RechartsDataTable
Feature-rich table with sorting, filtering, and pagination.
TanStack TablePagination
Page navigation controls with previous, next, and ellipsis.
Resizable
Resizable split panels with draggable handles.
react-resizable-panelsSheet
Slide-in overlay panel from any edge of the screen.
Radix DialogSidebar
Collapsible sidebar navigation with nested menus.
Sonner
Toast notifications with neobrutalism styling.
SonnerTable
Styled HTML table with header, body, and footer sections.
Landing (12)
Sections and blocks for marketing and landing pages.
AnnouncementBanner
Dismissible top-of-page banner for announcements and promotions.
CTABanner
Call-to-action section with headline and action buttons.
FAQ
Accordion-style frequently asked questions section.
FeatureSection
Grid of feature cards with icons and descriptions.
Footer
Site footer with link groups, branding, and newsletter.
Hero
Main hero section with headline, subtitle, and CTA buttons.
LogoCloud
Trusted-by logo strip for social proof.
NewsletterSignup
Email signup form with input and submit button.
PricingTable
Pricing plan cards with feature lists and tier highlights.
Section
Generic wrapper for landing page sections with consistent spacing.
StatsBar
Metrics row displaying key numbers and stats.
Testimonial
Customer quote cards with author details.
Demos (21)
Full-page compositions showing components working together.
Full Pages
Authentication
Unified Sign In
Tabbed sign-in with password and magic link methods in one page.
Sign In
Authentication page with form validation, social login, and loading states.
Sign Up
Registration flow with multi-field validation and success feedback.
Magic Link
Passwordless sign-in via email link with sent confirmation.
Verification
Password
Two-Factor
Security
Ready to build?
Install Substrate UI and start shipping bold, accessible interfaces today.