@cyberleek/design

A Vue 3 component library for terminal-inspired interfaces with a signal.

@cyberleek/design combines shadcn-style composition, Reka UI primitives, Tailwind CSS v4 tokens, and accessible interaction patterns in a compact blue-green terminal visual system.

Install

pnpm add @cyberleek/design

Import the stylesheet once before mounting your application:

import '@cyberleek/design/styles.css'

Then import only the components you need:

<script setup lang="ts">
import { LButton, LCard, LStatusBadge } from '@cyberleek/design'
</script>

<template>
  <LCard title="系统状态">
    <LStatusBadge tone="live">在线</LStatusBadge>
    <LButton class="mt-3">查看</LButton>
  </LCard>
</template>

Components

• LButton
• LCard, LCardHeader, LCardContent
• LLayout
• LTypography
• LCollapsible
• LDivider
• LCode
• LSectionToggle
• LStatusBadge
• LStatGrid, LStatItem
• LProgressBar
• LDataList
• LAnnouncementList

The package also exports the cn helper, designTokens, and the DesignToken type.

Theme tokens

The stylesheet provides the --l-* design tokens used by the components, including colors, typography, spacing, shadows, and layout width. When using Tailwind CSS v4, layer your application theme on top of these variables instead of copying token values into your project.

Local development

From the workspace root:

pnpm install
pnpm dev:design
pnpm dev:docs

Useful checks:

pnpm typecheck
pnpm test
pnpm build
pnpm verify

The full component documentation includes installation guidance, API details, accessibility notes, and live previews.