DEV Community: Aniruddha Agarwal

BoldKit Spring 2026: v3.0 v3.2.2 - ASCII Animations, Canvas Effects, Dot Matrix Studio & More

Aniruddha Agarwal — Fri, 01 May 2026 02:33:23 +0000

Spring 2026 has been the most productive stretch in BoldKit's history — the free neubrutalism UI component library for React and Vue 3. Six weeks, five major version bumps (v2.6 → v3.2.2), and more new capabilities than any previous release cycle.

Here's everything that shipped.

March 2026

🎨 Landing Page Redesign

The homepage got a full editorial neubrutalism overhaul. The design direction: bold display typography, tight grid discipline, and strong color contrast — no gradients, no rounded corners, no safe choices.

What changed:

Bebas Neue + DM Mono — Bebas Neue for all display headlines (clamp(56px, 14vw, 180px)), DM Mono for code snippets and labels
Component collage hero — a floating grid of live BoldKit components sits beside the headline on desktop, giving visitors an instant visual feel for the library
Stats bar — 4 colored cells (50+ components, 10 charts, 45 shapes, MIT licensed) using the full neubrutalism vocabulary: border-3, 4px offset shadows, zero border-radius
Component showcase — asymmetric grid showing cards, badges, buttons, charts, and shapes in a dense, editorial layout
Dark CTA section — bg-foreground background, high contrast, GitHub and docs CTAs side by side

The font stack ships via <link> in index.html (not CSS @import) to avoid PostCSS ordering constraints with Tailwind v4.

📱 Mobile & Responsive Fixes

Several overflow and layout issues were fixed across breakpoints:

Hero overflow below 518px — the CLI command snippet was overflowing on very small screens. Fixed by adding min-w-0 to the <code> element and w-full min-w-0 to its wrapper, removing the fixed max-w
Stats bar mobile border — the item at grid position [1] had a right border that appeared mid-row on 2-column mobile layout; made it md:border-r-3 only
Component showcase tablet — added md:grid-cols-2 lg:grid-cols-3 with md:col-span-1 overrides so the layout works properly at all widths
Global scrollbar hiding — scrollbar-width: none + *::-webkit-scrollbar { display: none } applied globally in globals.css

🧩 Empty State: Animations, Layouts, and New Presets

The Empty State component had undocumented features. All of them are now fully documented with live demos.

Animations — three entrance animation variants — fadeIn, bounce, and scale — now have live interactive demos with a Replay button so you can see them fire on demand:

<EmptyState
  preset="no-results"
  animation="bounce"
/>

Layouts — both vertical (default) and horizontal layouts are now documented with side-by-side examples.

14 presets are fully covered: no-results, no-data, error, offline, permission-denied, coming-soon, maintenance, upload, no-notifications, no-messages, no-favorites, no-activity, empty-cart, and success. Plus success, warning, and destructive icon color variants.

🔵 Vue 3 Parity: Examples on All 34 Doc Pages

Every ExampleSection on the BoldKit docs previously showed only React code. All 34 component doc pages that were missing Vue examples now have them:

Dialog · Drawer · DropdownMenu · Pagination · Popover · Progress · RadioGroup · ScrollArea · Select · Separator · Sheet · Skeleton · Sonner · Sticker · Switch · Table · Tabs · Textarea · Toggle · ToggleGroup · Tooltip · AlertDialog · AspectRatio · Avatar · Breadcrumb · Calendar · Collapsible · Command · HoverCard · InputOtp · Label · LayeredCard · Marquee · EmptyState

Stateful examples use <script setup> with ref():

<script setup>
import { ref } from 'vue'
const open = ref(false)
</script>

<template>
  <Dialog v-model:open="open">
    ...
  </Dialog>
</template>

🔝 Header & Footer Redesign

Header — full neubrutalism upgrade:

3px coral accent stripe full-width above the nav
Bebas Neue wordmark; icon rotates -6° on hover
Active nav: 3px primary underline (matches top stripe weight)
Square border-3 theme toggle and hamburger that invert on hover
Bordered search pill: icon + Search... label + ⌘K kbd badge
Mobile: full-screen overlay, body scroll lock, env(safe-area-inset-bottom) for notched iPhones

Footer — restructured into three sections:

Always-dark hero with ghost BUILD BOLD watermark in Bebas Neue
Side-by-side React and Vue 3 install cards with framework branding
4-column links grid with DM Mono bottom bar

v3.0.0 — Advanced Charts, Animated Shapes, Theme Presets (March 30)

📊 4 New Chart Types (14 Total)

The chart library expanded with four advanced chart types, all styled in full neubrutalism with React and Vue 3 examples:

Chart	Description
`FunnelChart`	Conversion funnels, sales pipelines
`TreemapChart`	Hierarchical area visualization
`HeatmapChart`	Two-dimensional intensity grids
`SankeyChart`	Flow and allocation diagrams

Install any chart via the shadcn CLI:

npx shadcn@latest add "https://boldkit.dev/r/funnel-chart.json"

✨ Animated SVG Shapes

All 45+ BoldKit shapes now support animation props:

<StarShape
  animation="float"   // spin | pulse | float | wiggle | bounce | glitch
  speed="normal"      // slow | normal | fast
/>

7 animation variants, 3 speeds, pure CSS keyframes — no JS animation libraries required. A live showcase section was added to the /shapes page.

🎨 14 Theme Presets in ThemeBuilder

The Theme Builder got an upgraded card UI showing a 3-color strip preview, preset name, and descriptor tag. 14 curated presets are now available out of the box — covering everything from Cyberpunk to Pastel to Monochrome.

📄 Documentation Site Template

A new Documentation Site template was added to /templates — header, sidebar navigation, content area, and table of contents, all in neubrutalism style.

v3.0.4 — Math Curve Components & Shape Builder

📐 Math Curve Components

Three new components driven by real parametric math — no third-party dependencies, pure SVG paths computed via a shared math engine:

MathCurveLoader — animated loading spinner with 8 curve variants:

<MathCurveLoader
  curve="lissajous"   // rose | lissajous | butterfly | hypotrochoid |
                      // cardioid | lemniscate | fourier | rose3
  size="md"           // sm | md | lg | xl
  speed="normal"      // slow | normal | fast
/>

MathCurveProgress — value-driven progress indicator (0–100) across 5 open curves: spiral, heart, lissajous, cardioid, rose.

MathCurveBackground — ambient animated background layer wrapping children via asChild. Four slow ambient curves playing simultaneously.

All three ship for both React and Vue 3 / Nuxt.

🔷 Shape Builder

An interactive tool at /shapes/builder — pick any of the 54 SVG shapes, adjust props visually (color, stroke, fill, size, animation), preview live, and copy the exact component code. No more guessing prop combinations.

v3.1.0 — ASCII Art Engine (April 16)

🖥️ 12 Animated ASCII Art Components

The headline feature of v3.1.0. A complete ASCII animation engine built from scratch — no canvas, no WebGL, just text characters rendered at up to 60fps using real 3D math.

5 three-dimensional shapes using perspective projection, z-buffering, and Lambertian shading:

Component	Description
`AsciiTorus`	Rotating torus — X+Y axes
`AsciiDonut`	Classic donut.c — X+Z axes, fatter tube
`AsciiSphere`	Globe with rotating lat/lon grid and dark side
`AsciiCube`	Solid cube with back-face culling and per-face shading
`AsciiHelix`	DNA double helix — two parametric strands with rungs

7 generative 2D animations drawn into a character grid each frame:

Component	Description
`AsciiSpiral`	Archimedean spiral arms rotating continuously
`AsciiRose`	Rose curve `r=cos(5θ)` blooming and phase-shifting
`AsciiWave`	Multi-frequency sine interference scrolling left→right
`AsciiVortex`	Rotating density field collapsing toward center
`AsciiPulse`	Concentric rings expanding outward and fading
`AsciiMatrix`	Characters raining downward per column
`AsciiGrid`	Grid intersections pulsing with traveling waves

Shared prop API across all 12 components:

<AsciiTorus
  size="md"          // sm (24×12) | md (48×24) | lg (72×36) | hero (120×60)
  charset="blocks"   // blocks | braille | classic | line | dots
  speed="normal"     // slow (0.4×) | normal (1×) | fast (2.2×)
  color="#e74c3c"    // any CSS color; ignored when multicolor=true
  multicolor         // cycles primary→secondary→accent→warning→info→success per row
  animated={false}   // static first frame — fully SSR-safe, no RAF
/>

Nuxt support: animated={false} works without <ClientOnly>. Animated variants need <ClientOnly> to avoid hydration mismatch.

# React
npx shadcn@latest add "https://boldkit.dev/r/ascii-shapes.json"

# Vue 3 / Nuxt
npx shadcn-vue@latest add "https://boldkit.dev/r/vue/ascii-shapes.json"

📐 Math Curves: 15 Total

7 new parametric curves added to all three Math Curve components:

Curve	Formula
`astroid`	x=cos³(t), y=sin³(t)
`deltoid`	3-cusped hypocycloid
`nephroid`	2-cusped epicycloid (R=2, r=1)
`epicycloid`	General epicycloid
`superellipse`	Lamé curve with n=2.5
`triskelion`	3-armed rotational spiral
`involute`	Involute of a circle

Previously 8 curves, now 15 total.

🔷 SVG Shapes: 64 Total

10 new shapes added, including a new Mathematical category:

Geometric: HeptagonShape, DecagonShape, RhombusShape, EllipseShape, TrefoilShape
Mathematical: FibonacciSpiralShape, PenroseTriangleShape, KochSnowflakeShape, MobiusStripShape, TorusShape

Previously 54, now 64 total.

⭐ Rating Component

New component with three icon variants, keyboard navigation, and half-step precision:

<Rating
  value={3.5}
  max={5}
  icon="star"      // star | heart | circle
  size="md"        // sm | md | lg | xl
  precision={0.5}  // 1 | 0.5
  readOnly
  aria-label="Product rating"
/>

Full keyboard navigation (arrow keys), aria-readonly support, configurable aria-label.

npx shadcn@latest add "https://boldkit.dev/r/rating.json"

v3.2.0 — Dot Matrix Studio

A full in-browser pixel art and animation editor at /studio — built entirely with BoldKit components.

Drawing tools:

Pencil, eraser, shapes (rectangle, ellipse, line), text tool
Selection with Fill, Clear, and Invert actions
Undo/redo stack
Drag-and-drop image import

Animation system:

10 presets: Blink, Typewriter, ScanLine, Marquee, Ripple, Bounce, Slide, Wave, Rain, Fade
Frame-by-frame editing
Looping playback with reliable frame timing

Export options:

WebM video
PNG (single frame or spritesheet)
SVG
JSON (for re-import)

UX details:

localStorage persistence — your work survives a page refresh
Share Tech Mono font for the authentic pixel-art terminal feel
Pastel indigo theme

v3.2.1 — 10 Canvas Effects

10 zero-dependency animated canvas components, copy-pasteable for React, Vue 3, and Nuxt 3:

Effect	Description
`Aurora`	Northern lights gradient ribbons
`DotBlob`	Organic morphing dot field
`DotWave`	Wave-propagating dot grid
`FlowField`	Perlin noise vector field
`LissajousGrid`	Animated Lissajous curve grid
`MatrixRain`	Classic character rain
`Metaballs`	Organic merging blobs
`MouseRipple`	Ripple rings following the cursor
`ParticleWeb`	Connected particle network
`Plasma`	Sine-wave plasma color field

Each ships with:

Full React and Vue 3 implementations (no runtime dependencies)
shadcn CLI registry entries for one-command install
Per-card install command copy buttons
Live demos on the /canvas-effects page

# React
npx shadcn@latest add "https://boldkit.dev/r/aurora.json"

# Vue 3 / Nuxt
npx shadcn-vue@latest add "https://boldkit.dev/r/vue/aurora.json"

v3.2.2 — Accessibility & HiDPI Fixes (April 28)

🎯 Accessibility Improvements

A dedicated accessibility pass across the component library:

Slider — aria-label and aria-valuetext props on thumbs; fixes stale closure in onValueCommit
Rating — configurable aria-label; aria-readonly attribute when readOnly
Spinner — role="status" and aria-label="Loading" defaults across all 5 variants
Skeleton — aria-hidden="true" by default
Pagination — PaginationEllipsis gets role="img" so its aria-label is exposed to screen readers
InputOTP — InputOTPSeparator gets role="separator"; InputOTPGroup gets role="group"
Breadcrumb — removed invalid role="link" and aria-disabled from BreadcrumbPage
TreeView — improved expand/collapse labels; ArrowUp/ArrowDown keyboard navigation
Tour — role="dialog", aria-modal, aria-labelledby, and Escape key to close

📺 HiDPI / Retina Fix for Canvas Effects

All 10 canvas effects now apply devicePixelRatio scaling in their resize() functions — canvas components are sharp on Retina and HiDPI displays instead of blurry at 2× or 3× pixel density.

// Before: blurry on HiDPI
canvas.width = w;
canvas.height = h;

// After: sharp everywhere
const dpr = window.devicePixelRatio || 1;
canvas.width = w * dpr;
canvas.height = h * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

By the Numbers

Since March 2026, BoldKit grew from:

	March	May
UI Components	50+	55+
Charts	10	14
SVG Shapes	45	64
Math Curves	—	15
ASCII Art Components	—	12
Canvas Effects	—	10
Tools	ThemeBuilder	ThemeBuilder + Shape Builder + Dot Matrix Studio
Version	2.6.x	3.2.2

🔗 Install BoldKit

React:

npx shadcn@latest add "https://boldkit.dev/r/[component].json"

Vue 3 / Nuxt:

npx shadcn-vue@latest add "https://boldkit.dev/r/vue/[component].json"

Links:

🌐 boldkit.dev
⭐ GitHub
📖 Docs
🎨 Canvas Effects
🖥️ Dot Matrix Studio

If you're building with neubrutalism design — thick borders, hard shadows, sharp corners, bold type — BoldKit has everything you need for both React and Vue 3.

Give it a star if you find it useful! ⭐

BoldKit Now Supports Vue 3: 45+ Neubrutalism Components for Vue Developers

Aniruddha Agarwal — Sat, 07 Feb 2026 06:15:32 +0000

Hey Vue developers! 👋

Remember BoldKit, the neubrutalism component library I introduced a few weeks ago? Well, I've got exciting news — BoldKit v2.0 is here with full Vue 3 support!

If you missed the original announcement, BoldKit brings the bold, raw aesthetic of neubrutalism to your projects with thick borders, hard shadows, and high-contrast colors that make your UI pop.

What's New in v2.0?

The entire component library has been ported to Vue 3:

45+ components built with Composition API
35 SVG shapes for decorative elements
16 chart types powered by vue-echarts
2 templates (Landing Page & Portfolio)
Full TypeScript support
Compatible with shadcn-vue CLI

Quick Start

Getting started is dead simple. If you're using shadcn-vue:

# Install a single component
npx shadcn-vue@latest add https://boldkit.dev/r/vue/button.json

# Install multiple components
npx shadcn-vue@latest add https://boldkit.dev/r/vue/button.json https://boldkit.dev/r/vue/card.json https://boldkit.dev/r/vue/input.json

Or set up the registry alias in your components.json:

{
  "registries": {
    "@boldkit": "https://boldkit.dev/r/vue"
  }
}

Then install with:

npx shadcn-vue@latest add @boldkit/button @boldkit/card @boldkit/dialog

Code Example

Here's what a simple card looks like in Vue:

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <Card>
    <CardHeader class="bg-primary">
      <CardTitle class="flex items-center gap-2">
        Welcome to BoldKit
        <Badge variant="secondary">New</Badge>
      </CardTitle>
    </CardHeader>
    <CardContent class="space-y-4">
      <p>Build bold, beautiful interfaces with ease.</p>
      <div class="flex gap-2">
        <Button>Primary</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="accent">Accent</Button>
      </div>
    </CardContent>
  </Card>
</template>

Clean, readable, and fully typed. Just how Vue should be. 😎

Vue-Specific Tech Stack

BoldKit Vue is built on solid foundations:

Package	Purpose
Reka UI	Headless primitives (Vue port of Radix UI)
vue-echarts	Charts and data visualization
vue-sonner	Toast notifications
vaul-vue	Drawer component
lucide-vue-next	Icons
class-variance-authority	Variant management

All components use the <script setup> syntax with full TypeScript support and proper type inference.

What's Included?

Form Components

Button, Input, Textarea, Checkbox, Radio Group, Select, Switch, Slider, Label, Input OTP

Layout & Containers

Card, Layered Card, Dialog, Drawer, Sheet, Accordion, Collapsible, Tabs, Scroll Area, Aspect Ratio, Separator

Feedback & Status

Alert, Alert Dialog, Badge, Progress, Skeleton, Toast (Sonner)

Navigation

Breadcrumb, Dropdown Menu, Command Palette, Pagination, Popover, Tooltip, Hover Card

Data Display

Avatar, Table, Calendar, Charts (Area, Bar, Line, Pie, Radar, Radial)

Decorative (Neubrutalism Special)

Sticker, Stamp, Sticky Note, Marquee, 35 SVG Shapes

Interactive Documentation

The BoldKit docs now have a framework toggle. Switch between React and Vue to see code examples for your preferred framework:

Every component has Vue source code
Every example shows Vue usage
Installation commands update automatically

Theming Works the Same

The CSS is identical between React and Vue. All the neubrutalism magic comes from CSS variables:

:root {
  --primary: 0 84% 71%;       /* Coral */
  --secondary: 174 62% 56%;   /* Teal */
  --accent: 49 100% 71%;      /* Yellow */
  --shadow-color: 240 10% 10%;
  --radius: 0rem;             /* Keep it square! */
}

Use the Theme Builder to create custom themes — it works for both frameworks.

Why Neubrutalism?

If you're new to the style, neubrutalism is characterized by:

Thick borders — 3px solid borders that define elements
Hard shadows — Offset shadows with zero blur (4px 4px 0px)
Bold colors — High-contrast, vibrant palettes
Square corners — No border-radius allowed!
Raw typography — Bold, uppercase text for emphasis

It's the anti-minimalism movement, and it's perfect for portfolios, landing pages, and apps that want to stand out.

Contributing

BoldKit is open source (MIT license). If you find bugs, have ideas, or want to contribute components, PRs are welcome!

Whether you're a React developer or a Vue enthusiast, BoldKit has you covered. Give it a try and let me know what you build!

Drop a ⭐ on GitHub if you find it useful.

Happy coding! 🚀

Introducing BoldKit: A Neubrutalism React Component Library

Aniruddha Agarwal — Fri, 30 Jan 2026 14:20:04 +0000

Introducing BoldKit: Neubrutalism for React

Hey developers! I'm excited to share BoldKit, a free and open-source React component library I've been working on. If you're tired of the same polished, rounded-corner UI libraries and want something that stands out, this might be for you.

What is Neubrutalism?

Neubrutalism (or neo-brutalism) is a bold design trend that's been taking over the web. Think:

Thick 3px borders that make elements pop
Hard shadows with zero blur (like 4px 4px 0px)
Vibrant, high-contrast colors
Square corners - no border-radius allowed!
Bold, uppercase typography

It's raw, it's unapologetic, and it's incredibly eye-catching.

Why BoldKit?

I built BoldKit because I wanted:

shadcn/ui compatibility - Same architecture, familiar patterns
One-command installs - Use the shadcn CLI you already know
Full accessibility - Built on Radix UI primitives
Modern stack - React 19, Tailwind CSS v4, TypeScript

Quick Start

It's literally one command:

npx shadcn@latest add https://boldkit.dev/r/button.json

Or install multiple components:

npx shadcn@latest add https://boldkit.dev/r/button.json https://boldkit.dev/r/card.json https://boldkit.dev/r/input.json

That's it. No npm packages to manage, no version conflicts. Just copy-paste components that you own.

What's Included?

45 Components

Everything you need to build complete interfaces:

Form Controls:

Button (7 variants, 5 sizes)
Input, Textarea
Checkbox, Radio Group, Switch
Select, Slider, Input OTP

Layout:

Card & Layered Card (stacked paper effect!)
Dialog, Drawer, Sheet
Accordion, Tabs, Collapsible

Feedback:

Alert, Alert Dialog
Badge, Progress, Skeleton
Toast notifications (Sonner)

Navigation:

Breadcrumb, Dropdown Menu
Command Palette, Pagination
Popover, Tooltip

30 SVG Shapes

Unique to BoldKit - decorative shapes for that extra neubrutalism flair:

import { BurstShape, HeartShape, LightningShape } from '@/components/ui/shapes'

<BurstShape size={100} className="text-primary" />
<HeartShape size={80} filled={false} strokeWidth={4} />
<LightningShape size={60} className="text-accent" />

Shapes include: Burst, Blob, Lightning, Heart, Stars, Shield, Cloud, Diamond, Hexagon, and 20 more!

Code Example

Here's a quick example of BoldKit in action:

import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { BurstShape } from '@/components/ui/shapes'

export function WelcomeCard() {
  return (
    <Card className="relative overflow-hidden">
      <BurstShape
        size={80}
        className="absolute -top-4 -right-4 text-accent opacity-50"
      />
      <CardHeader className="bg-primary">
        <CardTitle className="flex items-center gap-2">
          Welcome to BoldKit
          <Badge variant="secondary">New</Badge>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <p>Build bold, beautiful interfaces with ease.</p>
        <div className="flex gap-2">
          <Button>Get Started</Button>
          <Button variant="secondary">Learn More</Button>
        </div>
      </CardContent>
    </Card>
  )
}

Theming

BoldKit uses CSS variables, making customization dead simple:

:root {
  --primary: 0 84% 71%;       /* Coral */
  --secondary: 174 62% 56%;   /* Teal */
  --accent: 49 100% 71%;      /* Yellow */
  --destructive: 0 84% 60%;   /* Red */
  --shadow-color: 240 10% 10%;
  --radius: 0rem;             /* Keep it square! */
}

There's also a Theme Builder on the website where you can create and export custom themes.

Dark Mode

Full dark mode support out of the box. The neubrutalism aesthetic works beautifully in both light and dark themes.

Registry Setup (Optional)

If you want to use the cleaner @boldkit/component syntax, add this to your components.json:

{
  "registries": {
    "@boldkit": "https://boldkit.dev/r"
  }
}

Then install components like:

npx shadcn@latest add @boldkit/button @boldkit/card @boldkit/badge

Tech Stack

React 19 - Latest features
Tailwind CSS v4 - Modern utility-first CSS
Radix UI - Accessible primitives
TypeScript - Full type safety
Class Variance Authority - Clean variant management
Vite - Fast builds

Contributing

BoldKit is MIT licensed and open for contributions! Whether it's:

New components
Bug fixes
Documentation improvements
New SVG shapes

Check out the Contributing Guide to get started.

Try It Today

npx shadcn@latest add https://boldkit.dev/r/button.json

I'd love to hear what you think! Drop a comment below or open an issue on GitHub.

Star the repo if you find it useful! github.com/ANIBIT14/boldkit

Built with love by Aniruddha Agarwal