How anibit14/boldkit works
1. BoldKit is a component-library monorepo, not a single app. The main outputs are:
- a React documentation/preview site,
- a Vue 3 component package,
- shadcn-compatible registry artifacts served from public/ and registry/.
2. The React site is the primary application surface. Its entrypoint is src/main.tsx → src/App.tsx, with route/page composition in src/pages, layout shells in src/layouts and src/components/layout, and page metadata in src/config/routes-meta.ts plus SEO helpers. This site is where the library is browsed, demoed, and documented.
3. The React component source lives under src/components. The important families are:
- src/components/ui: core shadcn-style primitives and composites,
- src/components/blocks: full-page marketing/application sections,
- src/components/templates: page templates,
- src/components/CanvasEffects: animated background/effect components,
- src/components/DotMatrixStudio: a specialized editor/export tool,
- src/components/docs: documentation renderers for component pages.
4. The Vue implementation is a parallel package under packages/vue. It has its own src/main.ts, Vite config, styles, composables, and a large src/components/ui tree of Vue SFCs. Conceptually it mirrors the React library, but it is a separate runtime boundary and build output.
5. Registry distribution is a major architectural boundary. The installable artifacts are not the raw source files; they are generated JSON registries in public/r, public/vue, and top-level registry.json. These are what shadcn / shadcn-vue consume when users install @boldkit/* components.
6. The registry generation pipeline is script-driven. scripts/build-registry.js, scripts/sync-registry-from-src.js, scripts/build-canvas-effects-registry.js, and related generators translate the source components into installable registry entries and example manifests. The registry/default tree holds the canonical exported React component files, hooks, utilities, and demos that back those registry entries.
7. There is a clear source-of-truth → generated-artifact flow:
- author components in src/components and packages/vue/src/components,
- generate docs/examples/registry descriptors,
- publish those artifacts under public/ and registry/,
- consume them through the website or external shadcn installs.
This separation is important for diagramming because the website is both a docs app and a publishing source for registry payloads.
8. The design system is shared across the repo through CSS variables and utility helpers. Global styling lives in src/styles/globals.css and packages/vue/src/styles/globals.css, while src/lib/utils.ts, packages/vue/src/lib/utils.ts, and CVA variant files such as button-variants.ts encode reusable styling and component variants. Tailwind v4 and TypeScript are the main implementation stack.
9. Several specialized product areas sit on top of the core UI layer:
- charts in src/components/ui/chart,
- decorative SVG shapes in src/components/ui/shapes,
- ASCII shapes in src/components/ui/ascii-shapes,
- animated math-curve components,
- canvas effects for visual backgrounds.
These are first-class feature families, each with docs pages and registry exports.
10. The interactive tools are self-contained subdomains inside the main app. DotMatrixStudio has its own state hooks, export logic, presets, tweening, and tests, indicating a mini-application embedded in the docs site. Likewise the Shape Builder and Theme Builder pages are tool-style experiences rather than simple documentation.
11. Testing and validation are localized around the component layer. The repo uses Vitest for React component and hook tests under src/components/**/__tests__ and src/test, with package-level tests in the Vue area as needed. This suggests the library is validated at the component-contract level rather than via end-to-end app flows.
12. There is also a smaller React Native/example boundary under packages/react-native/example. It appears to be a separate consumer scaffold rather than the main product surface, and it is architecturally peripheral compared with the React site, Vue package, and registry pipeline.
13. In diagram terms, the key nodes are: source components, docs app, registry generator, published registry JSON/code, and the Vue package. The main external integration points are shadcn/shadcn-vue installers, plus browser runtime for the docs site and Vite-based builds for the packages.
Main entry points: pages Pages · ui UI primitives · default Default registry · CanvasEffects Canvas effects
Components 23
React docs site
Primary browser application for browsing, demoing, and documenting the library.
- App entry · Bootstraps the React docs site.
src/main.tsx - App shell · Top-level application composition and routing.
src/App.tsx - Pages · Section pages and docs views for the site.
src/pages - Layouts · Reusable page layout wrappers.
src/layouts - Layout UI · Header, footer, and layout chrome.
src/components/layout - Route meta · Page metadata and navigation labels.
src/config/routes-meta.ts - SEO helpers · SEO and article layout utilities for the site.
src/components/seo - Docs renderers · Shared doc page renderers and callouts.
src/components/docs
React components
React source components used by the docs site and registry generation.
- UI primitives · Core shadcn-style primitives and composites.
src/components/ui - Charts · Chart container, variants, and chart-specific utilities.
src/components/ui/chart - Blocks · Marketing and application section blocks.
src/components/blocks - Templates · Higher-level page templates for site composition.
src/components/templates - Dot Studio · Embedded editor/export tool with its own state, presets, and tweening.
src/components/DotMatrixStudio - Canvas effects · Animated background and effect components for both runtimes.
src/components/CanvasEffects
Registry pipeline
Generated shadcn-compatible artifacts and the scripts that build them.
- Registry build · Scripts that synthesize registry payloads from source components.
scripts/build-registry.js - Registry sync · Synchronizes registry artifacts from the source tree.
scripts/sync-registry-from-src.js - Default registry · Canonical exported React component and demo files backing registry output.
registry/default - Published registry · shadcn-compatible JSON manifests served from public and root registry files.
public/r
Vue package
Separate Vue 3 runtime and package boundary with mirrored component families.
- Vue entry · Bootstraps the Vue package runtime.
packages/vue/src/main.ts - Vue UI · Vue component library mirrored from the React design system.
packages/vue/src/components/ui - Vue blocks · Vue blocks and templates for demos and docs.
packages/vue/src/components/blocks - Vue composables · Shared state and environment composables.
packages/vue/src/composables
Peripheral examples
Secondary consumer scaffolds outside the core docs-and-registry architecture.
- RN example · Peripheral React Native example app.
packages/react-native/example
Connections 29
- App entry → App shell: boots · Application entry loads the top-level app shell.
- App shell → Pages: routes · App shell composes the route/page surface.
- App shell → Layouts: wraps · Pages are wrapped in shared layouts.
- Layouts → Layout UI: uses · Layout shells depend on the shared layout chrome.
- Pages → Route meta: reads · Page navigation and headings are driven by route metadata.
- Pages → Docs renderers: renders · Docs pages are assembled with shared doc renderers.
- Pages → UI primitives: showcases · Docs pages demonstrate core UI primitives.
- Pages → Blocks: showcases · Section pages document reusable blocks.
- Pages → Templates: showcases · Template pages present higher-level compositions.
- Pages → Dot Studio: hosts · The docs site embeds the Dot Matrix Studio tool.
- Pages → Canvas effects: showcases · Canvas effect pages present the visual-effect family.
- Docs renderers → SEO helpers: uses · Docs rendering is paired with SEO/article helpers.
- UI primitives → Charts: includes · The chart subsystem is a major part of the UI layer.
- UI primitives → Canvas effects: references · Shared visual families are reused by the UI layer.
- UI primitives → Default registry: exports to · React UI source is transformed into canonical registry exports.
- Blocks → Default registry: exports to · Blocks are mirrored into registry-ready component files.
- Templates → Default registry: exports to · Templates are included in the canonical registry tree.
- Dot Studio → Registry build: feeds · Studio assets are packaged through the registry build pipeline.
- Canvas effects → Registry build: feeds · Effect components are converted into registry payloads.
- Registry build → Published registry: publishes · Generator scripts emit the published registry JSON.
- Registry sync → Default registry: syncs · Source components are synchronized into the canonical registry tree.
- Default registry → Published registry: compiles to · Registry source files are published as installable manifests.
- Vue entry → Vue UI: boots · Vue package entry composes the UI component tree.
- Vue entry → Vue blocks: uses · Vue entry reuses blocks and templates.
- Vue UI → Vue composables: uses · UI components depend on shared Vue composables.
- UI primitives → Vue UI: mirrors · The Vue package mirrors the React design system.
- Blocks → Vue blocks: mirrors · Block and template patterns are mirrored in Vue.
- Canvas effects → Vue UI: mirrors · Visual effect components exist in both runtimes.
- Published registry → RN example: consumed by · Registry artifacts can be consumed by external client scaffolds.