A Vue 3 component library with a cyberpunk aesthetic, featuring OKLCH colors, beveled corners, and a powerful design token system
A Vue 3 component library with a cyberpunk aesthetic, featuring OKLCH colors, beveled corners, and a powerful design token system.
- Modern Vue 3 - Built with Composition API and full TypeScript support
- OKLCH Color Space - Perceptually uniform colors with runtime theming
- Design Token System - Three-tier hierarchy (Foundation → Semantic → Component)
- Beveled Corners - Native corner-shape: bevel with fallbacks
- Tailwind CSS v4 - Seamless integration via @theme system
- Custom Colors - Per-component color overrides
- IDE Support - Auto-generated types for Volar and WebStorm
``bash`
npm install @skewedaspect/sleekspace-ui
`js
import { createApp } from 'vue'
import SleekSpaceUI from '@skewedaspect/sleekspace-ui'
import '@skewedaspect/sleekspace-ui/style'
const app = createApp(App)
app.use(SleekSpaceUI)
app.mount('#app')
`
`vue
Click Me
`
- Getting Started - Installation and basic usage
- TypeScript Setup - IDE configuration and type support
- Theming - Runtime themes and custom colors
- Tailwind Integration - Using tokens with Tailwind CSS v4
- Design Tokens - Token system architecture
- Components - Component reference
- Development - Contributing and testing
Components support semantic color kinds for consistent theming:
`vue`
Available kinds: neutral, primary, accent, info, success, warning, danger
Override component colors on a per-instance basis:
`vue`
text-color="white"
>
Custom Purple Button
`bash`
npm install # Install dependencies
npm run dev # Start library watch + demo site
npm run build # Build everything
npm test # Run tests
npm run lint # Lint all workspaces
The demo site runs at http://localhost:3030 and provides live preview of all components with hot reload. This is the recommended way to develop and test components.
See Development Guide for detailed information.
This is a monorepo using npm workspaces:
- packages/sleekspace-ui - Component librarypackages/docs-site` - Demo and documentation site
-
MIT © Christopher S. Case