@slexn/codecenter-ui

CodeCenter UI

A scalable Vue 3 component system with typed package exports, source-installable shadcn-vue registry items, a Nuxt documentation application, live previews, and contract-driven validation.

Development

npm run dev

The documentation application runs at the local URL printed by Nuxt. Component sources live in packages/codecenter-ui/src/components/ui.

Package usage

import { Button } from "@slexn/codecenter-ui"
import "@slexn/codecenter-ui/styles.css"

Consumers that only need one entry can use a component subpath:

import { Button } from "@slexn/codecenter-ui/components/button"

Reusable foundations have dedicated tree-shakable entrypoints:

import { createContext, useDisclosure } from "@slexn/codecenter-ui/composables"
import { clamp, composeEventHandlers, toArray } from "@slexn/codecenter-ui/lib"
import type { DeepPartial, Orientation } from "@slexn/codecenter-ui/types"

Validation

npm run check

Structure

• packages/codecenter-ui/src: publishable library source
• packages/codecenter-ui/src/lib: dependency-light function utilities
• packages/codecenter-ui/src/composables: Vue composition utilities
• packages/codecenter-ui/src/types: cross-component public types
• packages/codecenter-ui/tests: package tests
• apps/docs: documentation and preview application
• registry.json: source registry definition
• public/r: generated source registry output
• scripts: architecture, package, registry, and dependency checks

Each component owns its Vue source, variants and types, folder export, tests, Markdown guide, live preview, package export, and registry entry.

Shared foundations use narrow responsibility-based modules, public barrels, subpath package exports, behavior tests, type-contract tests, and dedicated documentation.

AI usage guides

Share these three Markdown files together with a compatible package release:

• AI_GUIDE.md: installation, app setup, version matching, and instructions for coding assistants.
• COMPONENTS.md: generated component catalog, public exports, and full component guides.
• EXAMPLES.md: Vue examples for prompt input, validated forms, and team data screens.

Regenerate the component reference after updating component docs or exports:

node scripts/generate-ai-docs.mjs
node scripts/generate-ai-docs.mjs --check