# BoldKit — Neubrutalism UI Component Library for React, Vue 3 & Nuxt > BoldKit is a free, open-source component library built on the neubrutalism (also spelled neobrutalism) design aesthetic. Components are copied into your project via the shadcn CLI — not imported from an npm package. Built on Radix UI (React) and Reka UI (Vue) primitives with Tailwind CSS v4. ## Quick Facts - **Version:** 3.3.9 - **Components:** 55+ UI components - **Charts:** 14 chart types - **Shapes:** 64 SVG decorative shapes - **Blocks:** 15 section blocks (10 marketing + 5 application) - **Templates:** 7 full-page templates - **Frameworks:** React 19, Vue 3, Nuxt - **Canvas Effects:** 19 zero-dependency animated canvas components - **Tools:** FavGrab (favicon extractor & image converter), Dot Matrix Studio (pixel art & animation editor), Shape Builder, Theme Builder - **Guides:** Neubrutalism guide cluster (what it is, colors, fonts, examples, vs brutalism) + favicon/image tool guides - **Styling:** Tailwind CSS v4 with CSS variables - **TypeScript:** Full type support - **Accessibility:** WCAG 2.1 AA — built on Radix UI (React) & Reka UI (Vue) primitives - **License:** MIT (free for personal and commercial use) --- ## What Makes BoldKit Unique BoldKit is a **neubrutalism** UI library. Every component is styled with: - **3px solid borders** (`border-3 border-foreground`) — no hairline borders - **4px hard offset shadows** with zero blur (`box-shadow: 4px 4px 0px hsl(var(--shadow-color))`) — flat, offset depth - **Zero border-radius** (`--radius: 0rem`) — sharp corners everywhere - **Bold typography** — 700+ font weight, uppercase labels, wide letter-spacing - **Hover = press-down** — elements translate(4px, 4px) and lose their shadow on hover, mimicking physical button press Components are installed via the **shadcn CLI** (code is copied directly into your project), so you own the source and can customize freely. There is no npm package to import. --- ## Links - **Website:** https://boldkit.dev - **Documentation:** https://boldkit.dev/docs - **Installation guide:** https://boldkit.dev/docs/installation - **Components:** https://boldkit.dev/components - **Charts:** https://boldkit.dev/charts - **Shapes:** https://boldkit.dev/shapes - **Shape Builder:** https://boldkit.dev/shapes/builder - **Blocks:** https://boldkit.dev/blocks - **Templates:** https://boldkit.dev/templates - **Theme Builder:** https://boldkit.dev/themes - **Dot Matrix Studio:** https://boldkit.dev/studio - **Canvas Effects:** https://boldkit.dev/canvas-effects - **Neubrutalism guide:** https://boldkit.dev/neubrutalism - **Neubrutalism colors:** https://boldkit.dev/neubrutalism/colors - **Neubrutalism fonts:** https://boldkit.dev/neubrutalism/fonts - **Neubrutalism examples:** https://boldkit.dev/neubrutalism/examples - **Neubrutalism vs Brutalism:** https://boldkit.dev/neubrutalism/vs-brutalism - **Tools hub:** https://boldkit.dev/tools - **Favicon generator:** https://boldkit.dev/tools/favicon-generator - **PNG to ICO:** https://boldkit.dev/tools/png-to-ico - **Favicon sizes cheat sheet:** https://boldkit.dev/tools/favicon-sizes - **Extract a favicon:** https://boldkit.dev/tools/extract-favicon - **FavGrab (favicon extractor & image converter):** https://favgrab.boldkit.dev - **GitHub:** https://github.com/ANIBIT14/boldkit - **Registry index:** https://boldkit.dev/registry.json - **llms-full.txt:** https://boldkit.dev/llms-full.txt - **Sitemap:** https://boldkit.dev/sitemap.xml --- ## Dot Matrix Studio BoldKit includes a free in-browser **Dot Matrix Studio** at https://boldkit.dev/studio — a pixel art and frame animation editor. No install required. **Features:** - 16×32 dot grid canvas (resizable) - Tools: pencil, eraser, shapes (line/rect/circle), text, select - Frame-by-frame animation with undo/redo (50-step stack) - 8 animation presets: Blink, Typewriter, Scan Line, Marquee, Ripple, Bounce, Slide, Fade - Selection actions: Fill, Clear, Invert selected region - Export: WebM video, PNG (single frame or spritesheet), animated SVG, JSON (.boldkit.json) - Import: drag-and-drop or file picker for .boldkit.json files - Sample animations available at /studio/ripple.boldkit.json, /studio/wave.boldkit.json, /studio/rain.boldkit.json, /studio/bounce.boldkit.json **Export formats:** - `webm` — animated video (VP9/VP8), loop modes: once / 3x / infinite (10 loops) - `png` — single active frame, or full spritesheet of all frames - `svg` — static single frame or animated multi-frame SVG with CSS keyframes - `json` — .boldkit.json format preserving all frames, colors, and metadata (re-importable) --- ## Canvas Effects BoldKit includes 19 animated canvas components at https://boldkit.dev/canvas-effects — zero external dependencies, fully typed, compatible with React, Vue 3, and Nuxt 3. Install any effect via `npx shadcn@latest add "https://boldkit.dev/r/.json"` (Vue: `/r/vue/.json`). **All 19 effects:** - **Dither** (`dither`) — a drifting plasma field quantised to two colors via a 4×4 Bayer matrix; the classic 1-bit / Game Boy look - **Halftone** (`halftone`) — print-style dot grid sized by a drifting brightness field; the cursor brightens nearby dots - **CRT** (`crt`) — retro cathode-ray screen with phosphor scanlines, a rolling brightness band, vignette and flicker - **Truchet** (`truchet`) — arc tiles join into an endless maze; a travelling dash makes the paths flow - **Dot Blob** (`dot-blob`) — Gaussian envelope × crossing waves drive halftone pixel sizes - **Aurora** (`aurora`) — Curtains of light ripple across a star-filled sky (configurable colors + star count) - **Dot Wave** (`dot-wave`) — Dual crossing sine waves modulate dot size and opacity - **Matrix Rain** (`matrix-rain`) — Columns of glowing heads and fading square trails - **Particle Web** (`particle-web`) — Particles connected by proximity-faded lines - **Mouse Ripple** (`mouse-ripple`) — Cursor interaction sends sine ripples through a dot grid - **Flow Field** (`flow-field`) — Particles follow a smooth value-noise angle field - **Metaballs** (`metaballs`) — Colored blobs merge via r²/d² scalar field threshold - **Lissajous Grid** (`lissajous-grid`) — Parametric curve table with phase drift - **Plasma Waves** (`plasma`) — Shifting color interference from 4 drifting wave sources - **Warp Speed** (`warp-speed`) — Stars streak outward through a hyperspace tunnel with motion-blur trails - **Gravity Wells** (`gravity-wells`) — Particles orbit gravitational attractors forming accretion spirals - **Topography** (`topography`) — Animated contour map with noise-driven elevation and marching squares - **Lightning** (`lightning`) — Fractal branching electric arcs with glow bloom and fade - **Voronoi Pulse** (`voronoi-pulse`) — Drifting Voronoi cells with pulsing color fills and bright edges **Technical details:** - Each effect is one self-contained file — no npm package, copied into your project - All effects use `requestAnimationFrame` with `ResizeObserver` for responsive canvas - React: live prop ref pattern (prop changes take effect instantly without restarting animation) - Vue 3 / Nuxt 3: reactive props read directly in RAF callback — SSR-safe via `onMounted` - Props: every effect exposes `speed` plus effect-specific props (color, count, palette, etc.) **React usage:** ```tsx import { Aurora } from '@/components/CanvasEffects/react' // Wrap in any sized container — canvas fills 100%
``` **Vue 3 / Nuxt 3 usage:** ```vue ``` --- ## Installation ### React (shadcn CLI) ```bash # Install a component npx shadcn@latest add https://boldkit.dev/r/{component}.json # Install the theme (required first) npx shadcn@latest add https://boldkit.dev/r/theme.json # Install all shapes npx shadcn@latest add https://boldkit.dev/r/shapes.json ``` ### React (GitHub registry — zero config) BoldKit's GitHub repo is also a shadcn GitHub registry. Install any React item directly with the `owner/repo/item` address — no components.json alias needed; scoped deps like `@boldkit/utils` resolve automatically. ```bash # Install a component (owner/repo/item) npx shadcn@latest add ANIBIT14/boldkit/button # Multiple, or pin to a tag/branch/SHA npx shadcn@latest add ANIBIT14/boldkit/button ANIBIT14/boldkit/card npx shadcn@latest add ANIBIT14/boldkit/button#main # Browse / preview 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 use the hosted URLs. ### Vue 3 / Nuxt (shadcn-vue CLI) ```bash # Install a component npx shadcn-vue@latest add https://boldkit.dev/r/vue/{component}.json # Install the theme npx shadcn-vue@latest add https://boldkit.dev/r/vue/theme.json # Install all shapes npx shadcn-vue@latest add https://boldkit.dev/r/vue/shapes.json ``` ### End-to-End Usage Example (React) ```bash # 1. Initialize shadcn in your project (if not already done) npx shadcn@latest init # 2. Install the BoldKit theme npx shadcn@latest add https://boldkit.dev/r/theme.json # 3. Install the Button component npx shadcn@latest add https://boldkit.dev/r/button.json ``` ```tsx // 4. Import and use import { Button } from '@/components/ui/button' export default function Page() { return (
) } ``` --- ## All Install Commands — React ### Core UI Components ```bash npx shadcn@latest add https://boldkit.dev/r/accordion.json npx shadcn@latest add https://boldkit.dev/r/alert.json npx shadcn@latest add https://boldkit.dev/r/alert-dialog.json npx shadcn@latest add https://boldkit.dev/r/aspect-ratio.json npx shadcn@latest add https://boldkit.dev/r/avatar.json npx shadcn@latest add https://boldkit.dev/r/badge.json npx shadcn@latest add https://boldkit.dev/r/breadcrumb.json npx shadcn@latest add https://boldkit.dev/r/button.json npx shadcn@latest add https://boldkit.dev/r/calendar.json npx shadcn@latest add https://boldkit.dev/r/card.json npx shadcn@latest add https://boldkit.dev/r/carousel.json npx shadcn@latest add https://boldkit.dev/r/checkbox.json npx shadcn@latest add https://boldkit.dev/r/collapsible.json npx shadcn@latest add https://boldkit.dev/r/command.json npx shadcn@latest add https://boldkit.dev/r/data-table.json npx shadcn@latest add https://boldkit.dev/r/date-range-picker.json npx shadcn@latest add https://boldkit.dev/r/dialog.json npx shadcn@latest add https://boldkit.dev/r/drawer.json npx shadcn@latest add https://boldkit.dev/r/dropdown-menu.json npx shadcn@latest add https://boldkit.dev/r/dropzone.json npx shadcn@latest add https://boldkit.dev/r/empty-state.json npx shadcn@latest add https://boldkit.dev/r/hover-card.json npx shadcn@latest add https://boldkit.dev/r/input.json npx shadcn@latest add https://boldkit.dev/r/input-otp.json npx shadcn@latest add https://boldkit.dev/r/kbd.json npx shadcn@latest add https://boldkit.dev/r/label.json npx shadcn@latest add https://boldkit.dev/r/layered-card.json npx shadcn@latest add https://boldkit.dev/r/marquee.json npx shadcn@latest add https://boldkit.dev/r/pagination.json npx shadcn@latest add https://boldkit.dev/r/popover.json npx shadcn@latest add https://boldkit.dev/r/progress.json npx shadcn@latest add https://boldkit.dev/r/radio-group.json npx shadcn@latest add https://boldkit.dev/r/rating.json npx shadcn@latest add https://boldkit.dev/r/scroll-area.json npx shadcn@latest add https://boldkit.dev/r/select.json npx shadcn@latest add https://boldkit.dev/r/separator.json npx shadcn@latest add https://boldkit.dev/r/sheet.json npx shadcn@latest add https://boldkit.dev/r/sidebar.json npx shadcn@latest add https://boldkit.dev/r/skeleton.json npx shadcn@latest add https://boldkit.dev/r/slider.json npx shadcn@latest add https://boldkit.dev/r/sonner.json npx shadcn@latest add https://boldkit.dev/r/spinner.json npx shadcn@latest add https://boldkit.dev/r/stat-card.json npx shadcn@latest add https://boldkit.dev/r/stepper.json npx shadcn@latest add https://boldkit.dev/r/sticker.json npx shadcn@latest add https://boldkit.dev/r/switch.json npx shadcn@latest add https://boldkit.dev/r/table.json npx shadcn@latest add https://boldkit.dev/r/tabs.json npx shadcn@latest add https://boldkit.dev/r/tag-input.json npx shadcn@latest add https://boldkit.dev/r/textarea.json npx shadcn@latest add https://boldkit.dev/r/time-picker.json npx shadcn@latest add https://boldkit.dev/r/timeline.json npx shadcn@latest add https://boldkit.dev/r/toggle.json npx shadcn@latest add https://boldkit.dev/r/toggle-group.json npx shadcn@latest add https://boldkit.dev/r/tooltip.json npx shadcn@latest add https://boldkit.dev/r/tour.json npx shadcn@latest add https://boldkit.dev/r/tree-view.json ``` ### Shapes & Decorative ```bash npx shadcn@latest add https://boldkit.dev/r/shapes.json ``` ### Charts ```bash npx shadcn@latest add https://boldkit.dev/r/chart.json npx shadcn@latest add https://boldkit.dev/r/sparkline.json npx shadcn@latest add https://boldkit.dev/r/donut-chart.json npx shadcn@latest add https://boldkit.dev/r/radar-chart.json npx shadcn@latest add https://boldkit.dev/r/radial-bar-chart.json npx shadcn@latest add https://boldkit.dev/r/gauge-chart.json npx shadcn@latest add https://boldkit.dev/r/funnel-chart.json npx shadcn@latest add https://boldkit.dev/r/treemap-chart.json npx shadcn@latest add https://boldkit.dev/r/heatmap-chart.json npx shadcn@latest add https://boldkit.dev/r/sankey-chart.json ``` ### Math Curve Components (NEW v3.0.x) ```bash # Shared math engine (required by all three math curve components) npx shadcn@latest add https://boldkit.dev/r/math-curves.json # Animated SVG loader using parametric math curves npx shadcn@latest add https://boldkit.dev/r/math-curve-loader.json # Progress bar rendered as an animated mathematical curve npx shadcn@latest add https://boldkit.dev/r/math-curve-progress.json # Full-bleed animated curve background npx shadcn@latest add https://boldkit.dev/r/math-curve-background.json ``` --- ## All Install Commands — Vue 3 / Nuxt Replace `https://boldkit.dev/r/` with `https://boldkit.dev/r/vue/` for all component URLs above, and use `npx shadcn-vue@latest add` instead of `npx shadcn@latest add`. ```bash # Examples npx shadcn-vue@latest add https://boldkit.dev/r/vue/button.json npx shadcn-vue@latest add https://boldkit.dev/r/vue/card.json npx shadcn-vue@latest add https://boldkit.dev/r/vue/shapes.json npx shadcn-vue@latest add https://boldkit.dev/r/vue/math-curve-loader.json ``` --- ## Design Tokens ### CSS Variables (Neubrutalism Theme) ```css :root { /* Colors (HSL format) */ --primary: 0 84% 71%; /* Coral red */ --secondary: 174 62% 56%; /* Teal */ --accent: 49 100% 71%; /* Yellow */ --destructive: 0 84% 60%; /* Red */ --success: 152 69% 69%; /* Green */ --warning: 49 100% 60%; /* Amber */ --info: 212 100% 73%; /* Blue */ --muted: 240 5% 96%; /* Light gray */ --foreground: 240 10% 4%; /* Near-black */ --background: 0 0% 100%; /* White */ /* Neubrutalism-specific */ --shadow-color: 240 10% 10%; /* Hard shadow color */ --border: 240 10% 10%; /* Border color */ --radius: 0rem; /* Zero border-radius = sharp corners everywhere */ } ``` ### Neubrutalism CSS Utilities ```css /* Thick 3px borders */ .border-3 { border-width: 3px; } /* Hard offset shadow (no blur) */ .bk-shadow { box-shadow: 4px 4px 0px hsl(var(--shadow-color)); } /* Press-down hover effect */ .bk-hover:hover { transform: translate(4px, 4px); box-shadow: none; } ``` --- ## Component Categories ### Layout & Containers Accordion, Card, Collapsible, Dialog, Drawer, LayeredCard, ScrollArea, Sheet, Sidebar, StatCard, Stepper, Tabs ### Form Controls Button, Calendar, Checkbox, DateRangePicker, Dropzone, Input, InputOTP, Label, RadioGroup, Rating, Select, Slider, Switch, TagInput, Textarea, TimePicker, Toggle, ToggleGroup ### Feedback & Status Alert, AlertDialog, Badge, EmptyState, Progress, Skeleton, Sonner (Toast), Spinner, Tour ### Navigation Breadcrumb, Carousel, Command (Command Palette), DropdownMenu, HoverCard, Pagination, Popover, TreeView ### Data Display Avatar, DataTable, Kbd, Table, Timeline, Tooltip ### Charts (14 Types) Area Chart, Bar Chart, Line Chart, Pie Chart, Donut Chart, Radar Chart, Radial Bar Chart, Gauge Chart, Sparkline, Funnel Chart, Treemap Chart, Heatmap Chart, Sankey Chart, Horizontal Bar Chart ### Math Curve Components (NEW v3.0.x) MathCurveLoader, MathCurveProgress, MathCurveBackground ### Decorative (Neubrutalism Special) Sticker, Marquee, 54 SVG Shapes --- ## Code Examples ### Button ```tsx import { Button } from '@/components/ui/button' // Variants: default, secondary, accent, destructive, outline, ghost, link // Sizes: default, sm, lg, xl, icon ``` ### Card ```tsx import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card' Card Title Description text

Content goes here

 ``` ### Input ```tsx import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label'
``` ### Dialog ```tsx import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog' Dialog Title Dialog description

Dialog content here

 ``` ### Shapes ```tsx import { BurstShape, HeartShape, LightningShape, Star5Shape, BlobShape, SunShape, GearShape, SealShape, HexagonShape, CloudShape } from '@/components/ui/shapes' // Basic usage — all shapes accept size, className, filled, strokeWidth ``` ### Layered Card (stacked paper depth effect) ```tsx import { LayeredCard, LayeredCardHeader, LayeredCardTitle, LayeredCardContent } from '@/components/ui/layered-card' Stacked Card Creates a stacked paper depth effect // layers: "single" | "double" | "triple" // offset: "sm" | "default" | "lg" // layerColor: "default" | "primary" | "secondary" | "accent" | "muted" ``` ### Marquee (scrolling ticker) ```tsx import { Marquee } from '@/components/ui/marquee' Scrolling content More content // speed: "slow" | "normal" | "fast" // direction: "left" | "right" ``` ### Sticker ```tsx import { Sticker } from '@/components/ui/sticker' New! // variant: "default" | "accent" | "destructive" | "success" // rotation: "left" | "right" | "none" ``` ### Spinner ```tsx import { Spinner } from '@/components/ui/spinner' // variants: default, dots, bars, blocks, brutal // sizes: xs, sm, md, lg, xl ``` ### Kbd (keyboard key) ```tsx import { Kbd, KbdCombo } from '@/components/ui/kbd' ⌘ // variant: "default" | "outline" | "ghost" // size: "sm" | "md" | "lg" ``` ### Stepper (wizard) ```tsx import { Stepper, StepperList, StepperItem, StepperTrigger, StepperContent, StepperSeparator } from '@/components/ui/stepper' Details Payment Confirm Step 1 content Step 2 content Step 3 content // orientation: "horizontal" | "vertical" ``` ### Dropzone (file upload) ```tsx import { Dropzone, FileList } from '@/components/ui/dropzone' console.log(files)} accept={{ 'image/*': ['.png', '.jpg', '.jpeg'] }} maxSize={5 * 1024 * 1024} maxFiles={5} /> handleRemove(file)} /> // variant: "default" | "compact" | "minimal" ``` ### StatCard ```tsx import { StatCard } from '@/components/ui/stat-card' } color="success" /> // trend: "up" | "down" // color: "primary" | "secondary" | "accent" | "success" | "warning" | "info" | "destructive" // variant: "default" | "compact" | "large" ``` ### Rating ```tsx import { Rating } from '@/components/ui/rating' setRating(val)} /> ``` ### TagInput (multi-value tag input) ```tsx import { TagInput } from '@/components/ui/tag-input' ``` ### TimePicker ```tsx import { TimePicker } from '@/components/ui/time-picker' ``` ### DateRangePicker ```tsx import { DateRangePicker } from '@/components/ui/date-range-picker' ``` ### DataTable (sorting, filtering, pagination) ```tsx import { DataTable } from '@/components/ui/data-table' ``` ### EmptyState ```tsx import { EmptyState, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, EmptyStatePreset } from '@/components/ui/empty-state' import { Inbox, Plus } from 'lucide-react' // Composable API No messages Your inbox is empty // Preset API Clear search} /> // Available presets: 'no-results', 'no-data', 'empty-inbox', 'empty-folder', // 'no-users', 'empty-cart', 'no-notifications', 'no-images' // variant: "default" | "filled" | "card" ``` ### Sidebar ```tsx import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarNav, SidebarNavItem } from '@/components/ui/sidebar' My App }>Dashboard }>Settings Footer content ``` ### Timeline ```tsx import { Timeline, TimelineItem, TimelineConnector, TimelineContent, TimelineHeader } from '@/components/ui/timeline' January 2024 Project launched March 2024 First major release ``` ### TreeView ```tsx import { TreeView } from '@/components/ui/tree-view' const treeData = [ { id: '1', name: 'src', children: [ { id: '2', name: 'components', children: [] }, { id: '3', name: 'utils', children: [] }, ] } ] ``` ### Carousel ```tsx import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '@/components/ui/carousel' Slide 1 Slide 2 Slide 3 ``` ### Tour (product tours) ```tsx import { Tour, TourStep } from '@/components/ui/tour' ``` --- ## Math Curve Components (NEW v3.0.x) These three components share a common parametric math engine (`math-curves.ts`) that renders animated SVG curves based on real mathematical formulas. ### MathCurveLoader An animated SVG loading spinner powered by parametric math curves. 8 curve variants, each drawing a different mathematical shape in a continuous loop. ```tsx import { MathCurveLoader } from '@/components/ui/math-curve-loader' // curve variants: 'rose' | 'lissajous' | 'butterfly' | 'hypotrochoid' | // 'cardioid' | 'lemniscate' | 'fourier' | 'rose3' // size: "xs" | "sm" | "md" | "lg" | "xl" // speed: "slow" | "normal" | "fast" ``` ### MathCurveProgress A progress bar rendered as an animated mathematical curve that draws itself from 0% to 100%. ```tsx import { MathCurveProgress } from '@/components/ui/math-curve-progress' // curve variants: 'spiral' | 'heart' | 'lissajous' | 'cardioid' | 'rose' // value: 0–100 // size: "sm" | "md" | "lg" ``` ### MathCurveBackground A full-bleed animated background featuring flowing parametric curves. Ideal for hero sections, landing pages, and decorative panels. ```tsx import { MathCurveBackground } from '@/components/ui/math-curve-background' // curve variants: 'rose' | 'lissajous' | 'fourier' | 'spiral'

Your content here

 ``` ### Math Curve Engine Details The underlying math engine (`@/lib/math-curves`) computes all curves in `[0, 100]` SVG coordinate space, centered at `(50, 50)`. Curves include: | Curve | Formula | Use | |---|---|---| | `rose` | r = a·cos(5θ) — 5-petal rose | Loader, Progress, Background | | `rose3` | r = a·cos(3θ) — 3-petal rose | Loader | | `lissajous` | x = A·sin(3t + π/2), y = B·sin(4t) | Loader, Progress, Background | | `butterfly` | r = e^cos(t) − 2·cos(4t) − sin⁵(t/12) | Loader | | `hypotrochoid` | Spirograph: R=5, r=3 | Loader | | `cardioid` | r = a(1 + cos θ) | Loader, Progress | | `lemniscate` | r² = a²·cos(2θ) | Loader | | `fourier` | Fourier series approximation | Loader, Background | | `spiral` | Archimedean spiral | Progress | | `heart` | Parametric heart curve | Progress | --- ## Charts (14 Types) ```tsx import { ChartContainer, ChartTooltip, ChartTooltipContent, CHART_PALETTES, getChartColor } from '@/components/ui/chart' import { Bar, BarChart, XAxis, YAxis } from 'recharts' // Container variants: default, elevated, flat, filled, minimal, accent, primary // Color palettes: bold, vibrant, pastel, monochrome // getChartColor(palette, index) → 'hsl(0 84% 60%)' ``` **All chart types:** 1. **Area Chart** — time-series with filled area 2. **Bar Chart** — vertical bars (uses Recharts) 3. **Horizontal Bar Chart** — horizontal bars 4. **Line Chart** — line trends 5. **Pie Chart** — segmented circle 6. **Donut Chart** — pie with center slot for custom content 7. **Radar Chart** — multi-variable spider chart 8. **Radial Bar Chart** — circular progress bars (stacked/nested) 9. **Gauge Chart** — speedometer-style with zones and animated needle 10. **Sparkline** — inline mini chart (line, area, or bar) for tables and stat cards 11. **Funnel Chart** — conversion funnel visualization 12. **Treemap Chart** — hierarchical rectangle area chart 13. **Heatmap Chart** — grid-based intensity map 14. **Sankey Chart** — flow/relationship diagram ### Gauge Chart ```tsx import { GaugeChart } from '@/components/ui/chart' // size: "sm" | "md" | "lg" ``` ### Sparkline ```tsx import { Sparkline } from '@/components/ui/chart' // type: "line" | "area" | "bar" ``` ### Donut Chart ```tsx import { DonutChart, DonutChartCenter } from '@/components/ui/chart'
$12.5K
Total
 // variant: "default" | "separated" ``` --- ## SVG Shapes (54 Total) All shapes are React/Vue components. They accept `size`, `className`, `filled`, and `strokeWidth` props. ```tsx import { BurstShape } from '@/components/ui/shapes' ``` **All 54 shapes:** ### Geometric `TriangleShape`, `PentagonShape`, `HexagonShape`, `OctagonShape`, `CrossShape`, `TrapezoidShape`, `ParallelogramShape`, `WavyRectangleShape` ### Stars & Bursts `Star4Shape`, `Star5Shape`, `Star6Shape`, `StarShape`, `BurstShape`, `ExplosionShape`, `SplatShape` ### Nature & Organic `BlobShape`, `WaveShape`, `CloudShape`, `HeartShape`, `AppleShape`, `OrganicShape` ### Symbols & Icons `LightningShape`, `RibbonShape`, `ShieldShape`, `SunShape`, `CrescentShape`, `RainbowShape`, `PlanetShape`, `UmbrellaShape`, `EyeShape`, `CursorShape`, `GearShape`, `CelestialShape` ### Tags & Badges `TagShape`, `PriceTagShape`, `TicketShape`, `CouponShape`, `BookmarkShape`, `FlagShape`, `PillShape`, `SealShape`, `BadgeShape` ### Decorative `PaperTearShape`, `ScribbleUnderline` (via DecorativeShape variants), `GeometricShape`, `DecorativeShape`, `CommunicationShape`, `MechanicalShape` ### Interactive — Shape Builder Visit **https://boldkit.dev/shapes/builder** to interactively customize any shape's size, fill, stroke, color, and rotation, then copy the ready-to-use component code. --- ## Section Blocks (15 Total) Blocks are pre-built page sections that snap together to build full pages. All blocks follow neubrutalism aesthetics and are fully responsive. ### Marketing Blocks (10) | Block | Variants | |---|---| | **Hero Section** | Centered, Split, WithStats, Minimal, WithVideo | | **Feature Grid** | WithIcons, WithImages, Alternating, Bento | | **Testimonials** | Grid, Single, Masonry, WithAvatars | | **Logo Cloud** | Grid, Marquee, Cards, WithStats | | **CTA Section** | Simple, WithBackground, Newsletter, Split, Banner | | **Stats Section** | Grid, Cards, Split, Inline, WithIcons | | **Team Section** | Grid, List, LargePhotos, Compact | | **FAQ Section** | Accordion, TwoColumns, WithCategories, WithContact, SimpleList | | **Footer Section** | MultiColumn, WithNewsletter, Simple, Minimal, WithCTA | | **Contact Section** | Split, Centered, WithCards, WithMap | ### Application Blocks (5) | Block | Variants | |---|---| | **Auth Forms** | Login, SignUp, ForgotPassword, OTPVerification, SplitLayout | | **Settings Page** | Profile, Notifications, Security, Appearance, DangerZone, FullPage | | **Onboarding Flow** | Wizard, Welcome, ProfileSetup, WorkspaceSetup, GoalSelection, Completion | | **Error Pages** | NotFound (404), ServerError (500), Maintenance, Offline, Forbidden (403), ComingSoon, Generic | | **Invoice** | Full, Receipt, Summary, List | ### Blocks URLs - Hero Section: https://boldkit.dev/blocks/hero-section - Feature Grid: https://boldkit.dev/blocks/feature-grid - Testimonials: https://boldkit.dev/blocks/testimonials - Logo Cloud: https://boldkit.dev/blocks/logo-cloud - CTA Section: https://boldkit.dev/blocks/cta-section - Stats Section: https://boldkit.dev/blocks/stats-section - Team Section: https://boldkit.dev/blocks/team-section - FAQ Section: https://boldkit.dev/blocks/faq-section - Footer Section: https://boldkit.dev/blocks/footer-section - Contact Section: https://boldkit.dev/blocks/contact-section - Auth Forms: https://boldkit.dev/blocks/auth-forms - Settings Page: https://boldkit.dev/blocks/settings-page - Onboarding Flow: https://boldkit.dev/blocks/onboarding-flow - Error Pages: https://boldkit.dev/blocks/error-pages - Invoice: https://boldkit.dev/blocks/invoice --- ## Full-Page Templates (7) Ready-to-use page templates built from BoldKit components and blocks. 1. **Landing Page** — SaaS landing with hero, features, pricing, testimonials, footer 2. **Portfolio** — Personal portfolio with hero, services, projects, contact 3. **Dashboard** — Admin panel with sidebar, stat cards, charts, and data table 4. **Pricing** — 3-tier pricing with comparison table and FAQ accordion 5. **Blog** — Magazine-style blog with featured articles and newsletter signup 6. **Product** — E-commerce product page with gallery, reviews, related items 7. **Documentation** — Docs site layout with sidebar navigation and content area ### Template URLs - https://boldkit.dev/templates/landing-page - https://boldkit.dev/templates/portfolio - https://boldkit.dev/templates/dashboard - https://boldkit.dev/templates/pricing - https://boldkit.dev/templates/blog - https://boldkit.dev/templates/product - https://boldkit.dev/templates/documentation --- ## Tech Stack ### React - React 19 - Radix UI primitives (accessibility, keyboard navigation, ARIA) - Recharts (data visualization for standard charts) - Class Variance Authority (CVA) for type-safe variants - Tailwind CSS v4 ### Vue 3 / Nuxt - Vue 3 with Composition API - Reka UI primitives (Radix UI port for Vue) - vue-echarts (data visualization — ECharts backend) - Class Variance Authority (CVA) - Tailwind CSS v4 ### Shared - TypeScript (strict mode) - Tailwind CSS v4 with CSS custom properties - shadcn CLI compatible registry format --- ## Registry API All component JSON files follow the shadcn registry format and are available at: - **Registry index:** `https://boldkit.dev/registry.json` - **React components:** `https://boldkit.dev/r/{component-name}.json` - **Vue components:** `https://boldkit.dev/r/vue/{component-name}.json` --- ## Contact - **Author:** Aniruddha Agarwal - **Email:** aniruddha@boldkit.dev - **GitHub:** https://github.com/ANIBIT14/boldkit - **LinkedIn:** https://www.linkedin.com/in/aniruddhaagarwal/ --- ## License MIT License — Free for personal and commercial use.