CodeCenter UI

A typed Vue 3 component system with a Nuxt documentation application, source-installable registry items, and a dependency-light core entrypoint.

Documentation · Architecture · Contributing · Security

Highlights

• Vue 3 and TypeScript-first public APIs
• Tailwind CSS v4 design tokens without host-page resets
• Full and dependency-light package entrypoints
• Components, application blocks, and shadcn-vue registry output
• Nuxt 4 documentation with live previews and searchable Markdown guides
• Automated accessibility, dependency-boundary, bundle-budget, package-smoke, and rendered-doc checks

Repository layout

.
├── apps/
│   └── docs/                    # Nuxt documentation application and content
├── packages/
│   └── codecenter-ui/
│       ├── src/                 # Publishable components, blocks, styles, and utilities
│       └── tests/               # Library-focused unit and contract tests
├── public/r/                    # Generated source registry output
├── scripts/                     # Repository policy and release checks
├── registry.json                # Source registry catalog
└── package.json                 # Public npm contract and task orchestration

The npm package remains rooted at the repository root so existing release automation and every public import path remain stable. Application-only documentation code is isolated under apps/docs; publishable runtime code is isolated under packages/codecenter-ui.

Requirements

• Node.js 22 or newer
• npm 10 or newer

The pinned development line is recorded in .node-version.

Development

npm install
npm run dev

The documentation application is available from the Nuxt development URL. Common tasks:

npm run lint
npm run test:run
npm run typecheck
npm run build
npm run registry:build
npm run docs:build
npm run check

npm run check is the required repository gate. It verifies architecture boundaries, formatting, tests and coverage, production dependencies, color policy, registry integrity, TypeScript, bundle budgets, the packed npm artifact, and the static documentation build.

Install

npm install @slexn/codecenter-ui vue@^3.5.0

Import the stylesheet once near the application root:

import "@slexn/codecenter-ui/styles.css"

Use the complete package catalog:

<script setup lang="ts">
import { Button, Card, CardContent, CardHeader, CardTitle } from "@slexn/codecenter-ui"
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle>CodeCenter UI</CardTitle>
    </CardHeader>
    <CardContent>
      <Button>Start</Button>
    </CardContent>
  </Card>
</template>

Use the Vue-only core when the application does not need advanced overlays or selection primitives:

import { Button, Card, ConfigProvider, Input } from "@slexn/codecenter-ui/core"

Granular component and block entrypoints are also available:

import { Button, type ButtonProps } from "@slexn/codecenter-ui/components/button"
import { DashboardOverview } from "@slexn/codecenter-ui/blocks/dashboard-overview"

Registry

The repository publishes source-installable registry items alongside the compiled package.

npm run registry:build

• Catalog: @slexn/codecenter-ui/registry
• Item: @slexn/codecenter-ui/registry/button.json
• Source configuration: registry.json

Project policies

• Architecture and dependency rules
• Contribution workflow
• Security reporting
• Support policy
• Code of conduct
• Change history

License

CodeCenter UI is distributed under the terms in LICENSE. The repository follows open-source project engineering conventions, but its custom license remains the authoritative usage policy.