# anibit14/boldkit architecture

> Architecture diagram of the GitHub repository anibit14/boldkit, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-17). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/anibit14/boldkit
- Repository: https://github.com/anibit14/boldkit

## Overview

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: [`src/pages`](https://github.com/anibit14/boldkit/tree/main/src/pages) (Pages), [`src/components/ui`](https://github.com/anibit14/boldkit/tree/main/src/components/ui) (UI primitives), [`registry/default`](https://github.com/anibit14/boldkit/tree/main/registry/default) (Default registry), [`src/components/CanvasEffects`](https://github.com/anibit14/boldkit/tree/main/src/components/CanvasEffects) (Canvas effects)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_react_app["React docs site"]
  node_src_main(("App entry<br/>react entrypoint<br/>[main.tsx]"))
  node_src_app["App shell<br/>react app<br/>[App.tsx]"]
  node_src_pages["Pages"]
  node_src_layouts["Layouts"]
  node_src_layout_components["Layout UI<br/>layout components"]
  node_src_routes_meta["Route meta<br/>[routes-meta.ts]"]
  node_src_seo_helpers["SEO helpers"]
  node_src_component_docs["Docs renderers<br/>doc components"]
end

subgraph group_react_components["React components"]
  node_src_ui_core["UI primitives<br/>react ui"]
  node_src_ui_chart["Charts<br/>chart system"]
  node_src_blocks["Blocks"]
  node_src_templates["Templates"]
  node_dot_matrix_studio["Dot Studio<br/>tool subapp"]
  node_canvas_effects["Canvas effects<br/>visual effects"]
end

subgraph group_registry_pipeline["Registry pipeline"]
  node_build_registry(("Registry build<br/>generator scripts<br/>[build-registry.js]"))
  node_sync_registry(("Registry sync<br/>source sync"))
  node_registry_default["Default registry<br/>export source"]
  node_public_registry["Published registry<br/>generated artifacts"]
end

subgraph group_vue_package["Vue package"]
  node_vue_entry(("Vue entry<br/>[main.ts]"))
  node_vue_ui["Vue UI"]
  node_vue_blocks_templates["Vue blocks<br/>vue sections"]
  node_vue_composables["Vue composables<br/>vue hooks"]
end

subgraph group_peripheral["Peripheral examples"]
  node_react_native_example["RN example<br/>consumer scaffold"]
end

node_src_main -->|"boots"| node_src_app
node_src_app -->|"routes"| node_src_pages
node_src_app -->|"wraps"| node_src_layouts
node_src_layouts -->|"uses"| node_src_layout_components
node_src_pages -->|"reads"| node_src_routes_meta
node_src_pages -->|"renders"| node_src_component_docs
node_src_pages -->|"showcases"| node_src_ui_core
node_src_pages -->|"showcases"| node_src_blocks
node_src_pages -->|"showcases"| node_src_templates
node_src_pages -->|"hosts"| node_dot_matrix_studio
node_src_pages -->|"showcases"| node_canvas_effects
node_src_component_docs -->|"uses"| node_src_seo_helpers
node_src_ui_core -->|"includes"| node_src_ui_chart
node_src_ui_core -.->|"references"| node_canvas_effects
node_src_ui_core -->|"exports to"| node_registry_default
node_src_blocks -->|"exports to"| node_registry_default
node_src_templates -->|"exports to"| node_registry_default
node_dot_matrix_studio -->|"feeds"| node_build_registry
node_canvas_effects -->|"feeds"| node_build_registry
node_build_registry -->|"publishes"| node_public_registry
node_sync_registry -->|"syncs"| node_registry_default
node_registry_default -->|"compiles to"| node_public_registry
node_vue_entry -->|"boots"| node_vue_ui
node_vue_entry -->|"uses"| node_vue_blocks_templates
node_vue_ui -->|"uses"| node_vue_composables
node_src_ui_core -.->|"mirrors"| node_vue_ui
node_src_blocks -.->|"mirrors"| node_vue_blocks_templates
node_canvas_effects -.->|"mirrors"| node_vue_ui
node_public_registry -.->|"consumed by"| node_react_native_example

click node_src_main "https://github.com/anibit14/boldkit/blob/main/src/main.tsx"
click node_src_app "https://github.com/anibit14/boldkit/blob/main/src/App.tsx"
click node_src_pages "https://github.com/anibit14/boldkit/tree/main/src/pages"
click node_src_layouts "https://github.com/anibit14/boldkit/tree/main/src/layouts"
click node_src_layout_components "https://github.com/anibit14/boldkit/tree/main/src/components/layout"
click node_src_routes_meta "https://github.com/anibit14/boldkit/blob/main/src/config/routes-meta.ts"
click node_src_seo_helpers "https://github.com/anibit14/boldkit/tree/main/src/components/seo"
click node_src_component_docs "https://github.com/anibit14/boldkit/tree/main/src/components/docs"
click node_src_ui_core "https://github.com/anibit14/boldkit/tree/main/src/components/ui"
click node_src_ui_chart "https://github.com/anibit14/boldkit/tree/main/src/components/ui/chart"
click node_src_blocks "https://github.com/anibit14/boldkit/tree/main/src/components/blocks"
click node_src_templates "https://github.com/anibit14/boldkit/tree/main/src/components/templates"
click node_dot_matrix_studio "https://github.com/anibit14/boldkit/tree/main/src/components/DotMatrixStudio"
click node_canvas_effects "https://github.com/anibit14/boldkit/tree/main/src/components/CanvasEffects"
click node_build_registry "https://github.com/anibit14/boldkit/blob/main/scripts/build-registry.js"
click node_sync_registry "https://github.com/anibit14/boldkit/blob/main/scripts/sync-registry-from-src.js"
click node_registry_default "https://github.com/anibit14/boldkit/tree/main/registry/default"
click node_public_registry "https://github.com/anibit14/boldkit/tree/main/public/r"
click node_vue_entry "https://github.com/anibit14/boldkit/blob/main/packages/vue/src/main.ts"
click node_vue_ui "https://github.com/anibit14/boldkit/tree/main/packages/vue/src/components/ui"
click node_vue_blocks_templates "https://github.com/anibit14/boldkit/tree/main/packages/vue/src/components/blocks"
click node_vue_composables "https://github.com/anibit14/boldkit/tree/main/packages/vue/src/composables"
click node_react_native_example "https://github.com/anibit14/boldkit/tree/main/packages/react-native/example"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_src_main,node_src_app,node_src_pages,node_src_layouts,node_src_layout_components,node_src_routes_meta,node_src_seo_helpers,node_src_component_docs toneBlue
class node_src_ui_core,node_src_ui_chart,node_src_blocks,node_src_templates,node_dot_matrix_studio,node_canvas_effects toneAmber
class node_build_registry,node_sync_registry,node_registry_default,node_public_registry toneMint
class node_vue_entry,node_vue_ui,node_vue_blocks_templates,node_vue_composables toneRose
class node_react_native_example toneIndigo
```

## Components

### React docs site

Primary browser application for browsing, demoing, and documenting the library.

- [App entry](https://github.com/anibit14/boldkit/blob/main/src/main.tsx): react entrypoint · Bootstraps the React docs site. · `src/main.tsx`
- [App shell](https://github.com/anibit14/boldkit/blob/main/src/App.tsx): react app · Top-level application composition and routing. · `src/App.tsx`
- [Pages](https://github.com/anibit14/boldkit/tree/main/src/pages): route pages · Section pages and docs views for the site. · `src/pages`
- [Layouts](https://github.com/anibit14/boldkit/tree/main/src/layouts): shell layouts · Reusable page layout wrappers. · `src/layouts`
- [Layout UI](https://github.com/anibit14/boldkit/tree/main/src/components/layout): layout components · Header, footer, and layout chrome. · `src/components/layout`
- [Route meta](https://github.com/anibit14/boldkit/blob/main/src/config/routes-meta.ts): route metadata · Page metadata and navigation labels. · `src/config/routes-meta.ts`
- [SEO helpers](https://github.com/anibit14/boldkit/tree/main/src/components/seo): seo helpers · SEO and article layout utilities for the site. · `src/components/seo`
- [Docs renderers](https://github.com/anibit14/boldkit/tree/main/src/components/docs): doc components · Shared doc page renderers and callouts. · `src/components/docs`

### React components

React source components used by the docs site and registry generation.

- [UI primitives](https://github.com/anibit14/boldkit/tree/main/src/components/ui): react ui · Core shadcn-style primitives and composites. · `src/components/ui`
- [Charts](https://github.com/anibit14/boldkit/tree/main/src/components/ui/chart): chart system · Chart container, variants, and chart-specific utilities. · `src/components/ui/chart`
- [Blocks](https://github.com/anibit14/boldkit/tree/main/src/components/blocks): section blocks · Marketing and application section blocks. · `src/components/blocks`
- [Templates](https://github.com/anibit14/boldkit/tree/main/src/components/templates): page templates · Higher-level page templates for site composition. · `src/components/templates`
- [Dot Studio](https://github.com/anibit14/boldkit/tree/main/src/components/DotMatrixStudio): tool subapp · Embedded editor/export tool with its own state, presets, and tweening. · `src/components/DotMatrixStudio`
- [Canvas effects](https://github.com/anibit14/boldkit/tree/main/src/components/CanvasEffects): visual 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](https://github.com/anibit14/boldkit/blob/main/scripts/build-registry.js): generator scripts · Scripts that synthesize registry payloads from source components. · `scripts/build-registry.js`
- [Registry sync](https://github.com/anibit14/boldkit/blob/main/scripts/sync-registry-from-src.js): source sync · Synchronizes registry artifacts from the source tree. · `scripts/sync-registry-from-src.js`
- [Default registry](https://github.com/anibit14/boldkit/tree/main/registry/default): export source · Canonical exported React component and demo files backing registry output. · `registry/default`
- [Published registry](https://github.com/anibit14/boldkit/tree/main/public/r): generated artifacts · 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](https://github.com/anibit14/boldkit/blob/main/packages/vue/src/main.ts): vue entrypoint · Bootstraps the Vue package runtime. · `packages/vue/src/main.ts`
- [Vue UI](https://github.com/anibit14/boldkit/tree/main/packages/vue/src/components/ui): vue ui · Vue component library mirrored from the React design system. · `packages/vue/src/components/ui`
- [Vue blocks](https://github.com/anibit14/boldkit/tree/main/packages/vue/src/components/blocks): vue sections · Vue blocks and templates for demos and docs. · `packages/vue/src/components/blocks`
- [Vue composables](https://github.com/anibit14/boldkit/tree/main/packages/vue/src/composables): vue hooks · Shared state and environment composables. · `packages/vue/src/composables`

### Peripheral examples

Secondary consumer scaffolds outside the core docs-and-registry architecture.

- [RN example](https://github.com/anibit14/boldkit/tree/main/packages/react-native/example): consumer scaffold · Peripheral React Native example app. · `packages/react-native/example`

## Connections

- 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.