boldkit
# BoldKit <div align="center">  **Bold. Raw. Beautiful.** A neubrutalism component library for React and Vue 3, built on shadcn/ui. [](https://github.com/ANIBIT14/boldkit/releases/tag/v3.4.0) [](LICENSE) [](https://react.dev) [](https://vuejs.org) [](https://nuxt.com) [](https://tailwindcss.com) [](https://typescriptlang.org) [](https://boldkit.dev/components) [](https://boldkit.dev/charts) [](https://boldkit.dev/shapes) [](https://boldkit.dev/ascii-shapes) [Website](https://boldkit.dev) Β· [Documentation](https://boldkit.dev/docs) Β· [Components](https://boldkit.dev/components) Β· [Charts](https://boldkit.dev/charts) Β· [Shapes](https://boldkit.dev/shapes) </div> --- ## What's New in v3.3.0 ### 𧱠15 Full-Page Blocks β Production-ready page sections for React & Vue 3 **10 Marketing Blocks:** - **Hero Section** β Bold headline, subtext, CTA button, and optional image/shapes - **Feature Grid** β 3- and 4-column grids with icons and descriptions - **Testimonials** β Cards, carousel, and single-quote layouts with avatars - **Logo Cloud** β Client/partner logo strip with optional marquee scroll - **CTA Section** β Newsletter signup, trial signup, and contact variants - **Stats Section** β Big number KPIs with labels and neubrutalism accents - **Team Section** β Member cards with role, bio, and social links - **FAQ Section** β Accordion-based Q&A with expand/collapse animation - **Footer Section** β Multi-column layout with newsletter and social links - **Contact Section** β Contact form with info cards and map placeholder **5 Application Blocks:** - **Auth Forms** β Login, Signup, Forgot Password, OTP verification - **Error Pages** β 404, 500, and maintenance pages in neubrutalism style - **Settings Page** β Tabbed settings with Profile, Notifications, and Billing panels - **Onboarding Flow** β Multi-step setup wizard with progress tracking - **Invoice** β Printable invoice / receipt layout with line items and totals All blocks are installable via the shadcn CLI for both React and Vue 3/Nuxt. --- ### 𧩠11 New UI Components | Component | Description | |-----------|-------------| | **Carousel** | Image and content slider with prev/next navigation | | **Combobox** | Searchable select with keyboard navigation | | **Data Table** | Sortable, filterable table with column visibility and row selection | | **Date Range Picker** | Calendar-based date range selection | | **Rating** | Star rating input with half-star support | | **Sidebar** | Collapsible navigation sidebar with section groups | | **Tag Input** | Multi-value input with removable tag chips | | **Time Picker** | Hour/minute/second time selection with AM/PM toggle | | **Timeline** | Vertical activity feed and process flow component | | **Tour** | Step-by-step product tour with highlight and popover | | **Tree View** | Nested expandable tree for file explorers and hierarchies | --- ## Preview <div align="center">  *55+ beautifully crafted neubrutalism components, 10 chart types, 64 SVG shapes, 17 animated ASCII shapes, 19 canvas effects, and 15 math curve animations for React and Vue 3* </div> ## What is Neubrutalism? Neubrutalism (or neo-brutalism) is a bold design aesthetic characterized by: - **Thick Borders** - 3px solid borders that define elements - **Hard Shadows** - Offset shadows with no blur (4px 4px 0px) - **Bold Colors** - High-contrast, vibrant color palettes - **Raw Typography** - Bold, uppercase text for emphasis - **Zero Radius** - Square corners for that raw, unpolished look <div align="center">  </div> ## Features | Feature | Description | |---------|-------------| | **55+ Components** | Buttons, Cards, Dialogs, Forms, Spinners, Steppers, and more | | **10 Chart Types** | Bar, Line, Area, Pie, Donut, Radar, Radial, Gauge, Sparkline | | **64 SVG Shapes** | Decorative shapes (geometric, organic, mathematical, mechanical) with interactive Shape Builder | | **17 ASCII Shapes** | Animated 3D ASCII art β Torus, Donut, Sphere, Cube, Helix, Trefoil Knot, Saturn, DNA, and more | | **Dot Matrix Studio** | In-browser pixel art & animation editor with 10 presets, WebM/PNG/SVG/JSON export | | **19 Canvas Effects** | Animated canvas components β Dither, Halftone, CRT, Truchet, Aurora, Flow Field, Plasma, Metaballs, Matrix Rain and more. Zero deps. | | **Math Curve Components** | Animated loaders, progress bars, and backgrounds powered by 15 mathematical curves | | **React & Vue 3** | Full support for both frameworks | | **Nuxt Ready** | SSR-compatible with shadcn-nuxt module | | **shadcn CLI** | Install via `shadcn` (React) or `shadcn-vue` (Vue/Nuxt) | | **Accessible** | Built on Radix UI (React) & Reka UI (Vue) | | **Dark Mode** | Full light/dark theme support | | **TypeScript** | Complete type safety | | **Tailwind v4** | Modern CSS with latest Tailwind | ## Quick Start > **Required first step:** register the `@boldkit` alias in your `components.json`. > BoldKit components reference each other via scoped names like `@boldkit/utils`, > and without the alias the CLI resolves these against shadcn's default registry > (which doesn't ship them) and installs fail. ### Configure the registry alias **React** β add to `components.json`: ```json { "registries": { "@boldkit": "https://boldkit.dev/r/{name}.json" } } ``` **Vue** β add to `components.json`: ```json { "registries": { "@boldkit": "https://boldkit.dev/r/vue/{name}.json" } } ``` ### React (shadcn CLI) ```bash # Install a component npx shadcn@latest add @boldkit/button # Install multiple components npx shadcn@latest add @boldkit/button @boldkit/card @boldkit/input # Install shapes npx shadcn@latest add @boldkit/shapes # Install the BoldKit theme (CSS variables) npx shadcn@latest add @boldkit/styles ``` ### Vue 3 (shadcn-vue CLI) ```bash # Install a component npx shadcn-vue@latest add @boldkit/button # Install multiple components npx shadcn-vue@latest add @boldkit/button @boldkit/card @boldkit/input # Install shapes npx shadcn-vue@latest add @boldkit/shapes # Install the BoldKit theme (CSS variables) npx shadcn-vue@latest add @boldkit/styles ``` ### Alternative: direct URLs For one-off installs without configuring the alias, you can pass the registry URL directly. **Note:** components with cross-references won't auto-install their BoldKit dependencies this way β you'll need to add each dependency manually. ```bash # React npx shadcn@latest add https://boldkit.dev/r/button.json # Vue npx shadcn-vue@latest add https://boldkit.dev/r/vue/button.json ``` ### Install directly from GitHub (zero config, React) BoldKit's repository is also a shadcn **GitHub registry** β install any React component straight from the repo with no `components.json` alias and no setup. Scoped cross-references like `@boldkit/utils` resolve automatically (the CLI maps them to this same registry). ```bash # Install a component β owner/repo/item npx shadcn@latest add ANIBIT14/boldkit/button # Install multiple npx shadcn@latest add ANIBIT14/boldkit/button ANIBIT14/boldkit/card # Pin to a tag, branch, or commit SHA for reproducible installs npx shadcn@latest add ANIBIT14/boldkit/button#main # Browse / preview before installing npx shadcn@latest list ANIBIT14/boldkit npx shadcn@latest view ANIBIT14/boldkit/button npx shadcn@latest add ANIBIT14/boldkit/button --dry-run ``` > GitHub install covers the React registry (components, blocks, theme, utils, shapes). Vue 3 / Nuxt and > canvas effects install via the hosted URLs above. ### Nuxt ```bash # 1. Add shadcn-nuxt module npx nuxi@latest module add shadcn-nuxt # 2. Initialize shadcn-vue (select Nuxt when prompted) npx shadcn-vue@latest init # 3. Install BoldKit components npx shadcn-vue@latest add https://boldkit.dev/r/vue/button.json ``` **nuxt.config.ts:** ```typescript export default defineNuxtConfig({ modules: ['shadcn-nuxt'], shadcn: { prefix: '', componentDir: './components/ui' } }) ``` > **Note:** Some components (Drawer, Sonner, Command, Calendar, Chart) require `<ClientOnly>` wrapper for SSR. See the [Nuxt installation guide](https://boldkit.dev/docs/installation#nuxt-installation) for details. ## Usage ### React ```tsx import { Button } from '@/components/ui/button' import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card' import { Badge } from '@/components/ui/badge' export function Example() { return ( <Card> <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>Primary</Button> <Button variant="secondary">Secondary</Button> <Button variant="accent">Accent</Button> </div> </CardContent> </Card> ) } ``` ### Vue 3 ```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> ``` <div align="center">  </div> ## Components <details> <summary><strong>Form Components</strong></summary> - Button (7 variants, 5 sizes) - Input - Textarea - Checkbox - Radio Group - Select - Switch - Slider - Label - Input OTP - **Dropzone** (drag-and-drop file upload) β¨ NEW </details> <details> <summary><strong>Layout & Containers</strong></summary> - Card - Layered Card (stacked paper effect) - **Stat Card** (statistics display) β¨ NEW - Dialog - Drawer - Sheet - Accordion - Collapsible - Tabs - **Stepper** (multi-step forms/wizards) β¨ NEW - Scroll Area - Aspect Ratio - Separator </details> <details> <summary><strong>Feedback & Status</strong></summary> - Alert - Alert Dialog - Badge - Progress - Skeleton - **Spinner** (5 animation variants) β¨ NEW - Sonner (Toast) - **Math Curve Loader** (animated loading spinners driven by mathematical curves) β¨ NEW - **Math Curve Progress** (progress bars rendered as animated mathematical curves) β¨ NEW - **Math Curve Background** (full-bleed animated curve backgrounds) β¨ NEW </details> <details> <summary><strong>Navigation</strong></summary> - Breadcrumb - Dropdown Menu - Command Palette - Pagination - Popover - Tooltip - Hover Card </details> <details> <summary><strong>Data Display</strong></summary> - Avatar - Table - Calendar - **Kbd** (keyboard shortcut hints) β¨ NEW </details> <details> <summary><strong>Charts (10 Types)</strong></summary> - Area Chart - Bar Chart - Line Chart - Pie Chart - **Donut Chart** (pie with center content) β¨ NEW - **Radar Chart** (multi-variable comparison) β¨ NEW - **Radial Bar Chart** (circular progress) β¨ NEW - **Gauge Chart** (speedometer KPI) β¨ NEW - **Sparkline** (inline trend charts) β¨ NEW </details> <details> <summary><strong>Decorative (Neubrutalism Special)</strong></summary> - Sticker (rotated labels) - Marquee (scrolling ticker) - **64 SVG Shapes** (Geometric, Organic, Celestial, Mathematical, Mechanical, and more) β¨ EXPANDED - **17 ASCII Shapes** (Torus, Donut, Sphere, Cube, Helix, Trefoil Knot, Geodesic Dome, Saturn, Hyperboloid, DNA, Spiral, Rose, Wave, Vortexβ¦) β¨ NEW - **Shape Builder** (interactive tool to customize shapes, export SVG/JSX) β¨ NEW </details> ## Math Curve Components 15 animated mathematical curves (Lissajous, Hypotrochoid, Epitrochoid, Rose, Spirograph, and more) rendered as interactive UI elements β no external animation library required. <div align="center">  </div> ### MathCurveLoader ```tsx import { MathCurveLoader } from '@/components/ui/math-curve-loader' <MathCurveLoader curve="lissajous" size="md" speed="normal" /> <MathCurveLoader curve="rose" size="lg" speed="slow" /> <MathCurveLoader curve="spiral" size="xl" speed="fast" /> ``` ### MathCurveProgress ```tsx import { MathCurveProgress } from '@/components/ui/math-curve-progress' <MathCurveProgress value={65} curve="lissajous" /> <MathCurveProgress value={40} curve="rose" showLabel /> ``` ### MathCurveBackground ```tsx import { MathCurveBackground } from '@/components/ui/math-curve-background' <MathCurveBackground curve="lissajous" opacity={0.15}> <YourPageContent /> </MathCurveBackground> ``` ## Shapes 64 decorative SVG shapes across 8 categories for unique neubrutalism layouts: ### React ```tsx 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" /> ``` ### Vue 3 ```vue <script setup lang="ts"> import { BurstShape, HeartShape, LightningShape } from '@/components/ui/shapes' </script> <template> <BurstShape :size="100" class="text-primary" /> <HeartShape :size="80" :filled="false" :stroke-width="4" /> <LightningShape :size="60" class="text-accent" /> </template> ``` <div align="center">  </div> ### Shape Builder The interactive [Shape Builder](https://boldkit.dev/shapes/builder) lets you customize any shape's size, color, stroke width, and fill, then export it as SVG or copy it as JSX/Vue template code ready to paste into your project. ## ASCII Shapes 17 animated ASCII art components rendered with perspective projection, z-buffering, and Lambertian shading β no canvas, no WebGL, just text characters: <div align="center">  </div> | Shape | Description | |-------|-------------| | `AsciiTorus` | 3D rotating torus with z-buffering and Lambertian shading | | `AsciiDonut` | Classic donut.c doughnut β faithful a1k0n algorithm, hole always visible | | `AsciiSphere` | Rotating globe with lat/lon grid texture and Lambertian shading | | `AsciiCube` | Solid shaded cube rotating on two axes with back-face culling | | `AsciiHelix` | Double helix with two strands and connecting rungs | | `AsciiTrefoilKnot` | Trefoil knot tube with Frenet frames, z-buffer, and Lambertian shading | | `AsciiGeodesicDome` | Frequency-3 icosahedron wireframe projected onto a sphere | | `AsciiSaturn` | Planet with tilted solid ring system and Cassini division gap | | `AsciiHyperboloid` | Two families of straight-line rulings on a ruled surface tower | | `AsciiDNA` | B-form DNA double helix: 150Β° strand offset, 4 turns, tube backbone + rungs | | `AsciiSpiral` | Archimedean spiral arms rotating continuously | | `AsciiRose` | Rose curve r=cos(5ΞΈ) blooming and phase-shifting | | `AsciiWave` | Multi-frequency sine interference pattern | | `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 | ### React ```tsx import { AsciiTorus, AsciiDonut, AsciiSphere } from '@/components/ui/ascii-shapes' // Basic usage <AsciiTorus /> // With options <AsciiDonut size="md" // 'sm' | 'md' | 'lg' | 'hero' charset="classic" // 'blocks' | 'braille' | 'classic' | 'line' | 'dots' speed="normal" // 'slow' | 'normal' | 'fast' color="#e74c3c" // any CSS color string animated={true} // false = static snapshot, SSR-safe /> // Multicolor β cycles primary/secondary/accent/warning/info/success per row <AsciiSphere size="lg" charset="classic" multicolor /> ``` ### Vue 3 / Nuxt ```vue <script setup lang="ts"> import { AsciiTorus, AsciiDonut } from '@/components/ui/ascii-shapes' </script> <template> <AsciiDonut size="md" charset="classic" /> <!-- In Nuxt, wrap animated variants in <ClientOnly> --> <ClientOnly> <AsciiTorus size="lg" multicolor /> </ClientOnly> </template> ``` ### Install ```bash # 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" ``` ## Theming Customize with CSS variables (works for both React and Vue): ```css :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! */ } ``` Visit the [Theme Builder](https://boldkit.dev/themes) to create custom themes. ## Tech Stack ### React - **React 19** - Latest React with concurrent features - **Radix UI** - Accessible primitives - **Recharts** - Data visualization ### Vue 3 - **Vue 3** - Composition API with `<script setup>` - **Reka UI** - Accessible primitives (Radix port for Vue) - **vue-echarts** - Data visualization ### Nuxt - **Nuxt** - Vue meta-framework with SSR support - **shadcn-nuxt** - Official Nuxt module for shadcn-vue - **Auto-imports** - Components auto-imported from `components/ui` - **VueUse** - SSR-safe composables ### Shared - **Tailwind CSS v4** - Modern utility-first CSS - **TypeScript** - Full type safety - **Class Variance Authority** - Variant management - **Vite** - Fast development and builds ## Project Structure ``` boldkit/ βββ src/ # React documentation site βββ packages/ β βββ vue/ # Vue 3 components β βββ src/ β βββ components/ β βββ ui/ # Vue SFC components βββ public/ β βββ r/ # Component registry β βββ *.json # React registry β βββ vue/ β βββ *.json # Vue registry ``` ## Development ```bash # Clone git clone https://github.com/ANIBIT14/boldkit.git cd boldkit # Install npm install # Dev server (React docs site) npm run dev # Build npm run build # Build registry npm run registry:build ``` ## Contributing We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) and [Code of Conduct](CODE_OF_CONDUCT.md). ## License MIT License - free for personal and commercial use. --- <div align="center"> **Built by [Aniruddha Agarwal](https://github.com/ANIBIT14)** [LinkedIn](https://www.linkedin.com/in/aniruddhaagarwal/) Β· [GitHub](https://github.com/ANIBIT14/boldkit) </div>