@boldkit

BoldKit neubrutalism theme with bold colors and CSS variables

BoldKit Coral preset (warm & bold). Swaps brand colours and the tinted neutral palette; needs BoldKit's base styles already installed.

BoldKit Purple preset (vivid & dramatic). Swaps brand colours and the tinted neutral palette; needs BoldKit's base styles already installed.

BoldKit Forest preset (earthy & fresh). Swaps brand colours and the tinted neutral palette; needs BoldKit's base styles already installed.

BoldKit Ocean preset (cool & serene). Swaps brand colours and the tinted neutral palette; needs BoldKit's base styles already installed.

BoldKit Sunset preset (fiery & expressive). Swaps brand colours and the tinted neutral palette; needs BoldKit's base styles already installed.

BoldKit Mono preset (clean & minimal). Swaps brand colours and the tinted neutral palette; needs BoldKit's base styles already installed.

BoldKit Neon preset (electric & raw). Swaps brand colours and the tinted neutral palette; needs BoldKit's base styles already installed.

BoldKit Electric preset (punchy & vibrant). Swaps brand colours and the tinted neutral palette; needs BoldKit's base styles already installed.

BoldKit Candy preset (sweet & playful). Swaps brand colours and the tinted neutral palette; needs BoldKit's base styles already installed.

BoldKit Cyberpunk preset (toxic & dystopian). Swaps brand colours and the tinted neutral palette; needs BoldKit's base styles already installed.

BoldKit Retro preset (vintage & gritty). Swaps brand colours and the tinted neutral palette; needs BoldKit's base styles already installed.

BoldKit Pastel preset (soft & kawaii). Swaps brand colours and the tinted neutral palette; needs BoldKit's base styles already installed.

BoldKit Gold preset (luxury & refined). Swaps brand colours and the tinted neutral palette; needs BoldKit's base styles already installed.

BoldKit Cherry preset (bold & japanese). Swaps brand colours and the tinted neutral palette; needs BoldKit's base styles already installed.

BoldKit's body face (Outfit, variable). Self-hosted via Fontsource; sets --font-sans.

BoldKit's mono face (DM Mono). Self-hosted via Fontsource; sets --font-mono.

Everything a project needs before adding BoldKit components: the neubrutalism stylesheet + motion system, the default theme, cn() utils, and the Outfit / DM Mo…

Utility functions for className merging

Theme provider hook with light/dark/system support and localStorage persistence. Used by Sonner toast for theme-aware rendering.

Error boundary wrapper with neubrutalism-styled fallback UI. Used by math-curve components to catch runtime errors gracefully.

A vertically stacked set of interactive headings with neubrutalism styling

Displays a callout for user attention with bold neubrutalism borders

Displays content within a desired ratio

An image element with a fallback for representing the user

Displays a badge or a component that looks like a badge with neubrutalism styling

Displays the path to the current resource using a hierarchy of links

Displays a button with neubrutalism styling and press-down animation

Displays a card with header, content, and footer with thick borders and shadows

A control that allows the user to toggle between checked and not checked

An interactive component which expands/collapses a panel

Searchable dropdown built by composing Popover and Command with neubrutalism styling

Fast, composable, command menu for React with neubrutalism styling

A window overlaid on the primary window with neubrutalism borders and shadows

Displays a menu of actions/options with neubrutalism styling

Displays a menu triggered by right-click with neubrutalism styling

A horizontal menu bar of desktop-style dropdown menus with neubrutalism styling

A collection of links and dropdown panels for site navigation with neubrutalism styling

Resizable panel groups and handles with neubrutalism styling

Visually joins a row or column of buttons into one bordered unit

An input joined with leading/trailing addons in a single bordered field

Form field composition: label, control, description and error

A styled wrapper around the native select element, a11y-first

Numeric input with stepper buttons, min/max/step, keyboard control and Intl number formatting

A single-date picker: a button trigger that opens a calendar popover

Displays a form input field with neubrutalism styling

Renders an accessible label for form controls

Displays rich content in a portal with neubrutalism styling

Displays an indicator showing the completion progress of a task

A set of checkable buttons where only one can be checked at a time

Augments native scroll functionality for custom styling

Displays a list of options with neubrutalism styling

Visually separates content with a thick border

Extends Dialog to display content that complements the main page

Used to show a placeholder while content is loading

A jelly slider with spring physics and bouncy animations

An opinionated toast component with neubrutalism styling

First-party brutalist toast stacks with an imperative toast() API, promise toasts, swipe and stacking

A control that allows the user to toggle between on and off

A responsive table component with neubrutalism styling

A tabbed interface component with neubrutalism styling

Displays a form textarea with neubrutalism styling

A two-state button that can be either on or off

A group of toggle buttons where only one can be pressed at a time

A popup that displays information related to an element

A modal dialog for important confirmations with neubrutalism styling

A date picker calendar with neubrutalism styling

A drawer component that slides in from the edge of the screen

A card that appears on hover with additional information

One-time password input with neubrutalism styling

Pagination controls for navigating through pages

Beautiful charts with neubrutalism styling built on Recharts

Auto-scrolling text ticker with neubrutalism styling - a common brutalist design element

Rotated labels and stamps with tape effect and double borders - neubrutalist decorative elements

Card component with stacked layers effect showing offset depth - neubrutalist depth illusion

55 neubrutalist SVG shapes organized by category for badges, decorations, and visual accents

BoldKit neubrutalism CSS variables and utilities

Loading spinner with multiple animation variants - dots, bars, blocks, and brutal shadow spin

Keyboard key indicator for displaying shortcuts and hotkeys with neubrutalism styling

Statistics card with trend indicators, icons, and optional progress bars

Multi-step form wizard with progress indicators, compound components pattern

Dependency-free multi-step form state layer with per-step validation, designed to compose with Stepper

Multi-step question flow with single/multiple/free-text questions, skip, conditional logic and keyboard shortcuts

Drag-and-drop file upload with validation, progress tracking, and file list

Tiny inline trend charts for tables and stat cards - line, area, and bar variants

Pie chart with center hole for KPI display, supports center content slot

Circular progress bars with nested rings for multiple metrics

Multi-variable comparison chart for skills, metrics, and feature comparisons

Speedometer-style gauge with color zones and animated needle - custom SVG implementation

Funnel chart for conversion flows and pipeline stages with neubrutalism styling

Treemap for hierarchical data visualization with proportional rectangles

Heatmap grid for correlation and intensity data - custom CSS Grid implementation

Sankey flow diagram for showing proportional flows between nodes - custom SVG implementation

Star rating component with half-values, multiple icons, and keyboard navigation

Multi-tag input with suggestions, validation, and keyboard support

Popover-based time picker with 12h/24h format and scrollable columns

Date range picker with presets, dual calendars, and customizable options

Powerful data table with sorting, filtering, pagination, and row selection

Carousel component with navigation, dots, and touch support built on Embla

Chat / AI-assistant kit: MessageScroller (auto-follow, jump-to-latest, prepend anchoring), Message, Bubble, Attachment and Marker

Composable timeline for activity feeds, order tracking, and version history

Hierarchical tree view with expand/collapse, selection, and checkboxes

Collapsible sidebar with mobile drawer, tooltips, and keyboard shortcut

Step-by-step product tour with spotlight highlighting and progress indicators

Empty state component with icon, title, description, and optional actions

Framework-agnostic math engine for parametric curve animations (rose, lissajous, butterfly, hypotrochoid, cardioid, lemniscate, fourier, spiral, heart)

Animated mathematical curve loader with neubrutalism aesthetics — 8 curve variants including rose, lissajous, butterfly, and more

Progress indicator that traces a mathematical curve — value-driven head moves along the curve path from 0 to 100%

Ambient animated mathematical curve background layer with neubrutalism aesthetics — wraps content with a slow-moving curve animation

7 animated ASCII art components (Spiral, Rose, Wave, Vortex, Pulse, Matrix, Grid) with 5 character sets, 4 sizes, and SSR-safe static mode

BoldKit Motion System — framework-agnostic CSS tokens, keyframes, and six signature recipes (press, stamp-in, shake, reveal, slide-hard, pulse-shadow). Mobile-…

BoldKit Motion core — framework-agnostic, SSR-safe primitives (observeReveal, staggerChildren, triggerAnimation, startViewTransition, prefersReducedMotion) sha…

BoldKit Canvas Effect core — framework-agnostic canvas lifecycle shared by every CanvasEffect: DPR-aware sizing with a pixel-count cap, pausing when off-screen…

React hook that mounts an animated 2D canvas effect with a managed lifecycle — sizing, off-screen/background pausing, and reduced-motion — so a component only …

BoldKit Motion React adapter — <Motion>/<Reveal>/<Stagger> components plus useShake and useViewTransition hooks over a framework-agnostic core.

BoldKit chart export helpers — framework-agnostic, SSR-safe CSV / PNG / SVG download and fullscreen toggle. Works with any chart engine that renders an <svg> (…

Brutalist chart toolbar overlay — export the wrapped chart as PNG or SVG, download its data as CSV, and toggle fullscreen.