# SleekSpace UI — Complete Reference > Vue 3 component library with cyberpunk aesthetic. OKLCH colors, beveled corners, runtime theming. - Repository: https://gitlab.com/skewedaspect/sleekspace-ui - npm: @skewedaspect/sleekspace-ui --- # Guides # Installation ## Install the package ```bash npm install @skewedaspect/sleekspace-ui ``` ## Vue Plugin Registration Register all components globally using the Vue plugin: ```js import { createApp } from 'vue'; import App from './App.vue'; import SleekSpaceUI from '@skewedaspect/sleekspace-ui'; import '@skewedaspect/sleekspace-ui/style'; const app = createApp(App); app.use(SleekSpaceUI); app.mount('#app'); ``` ## CSS Import The style import is required regardless of how you register components: ```js import '@skewedaspect/sleekspace-ui/style'; ``` This provides all component styles and design tokens needed for theming. ## Tailwind CSS v4 Integration To use SleekSpace design tokens as Tailwind utilities, import the tokens file in your CSS entry point: ```css @import "tailwindcss"; @import "@skewedaspect/sleekspace-ui/tokens.css"; ``` This registers all SleekSpace CSS custom properties with Tailwind's `@theme` system, enabling utility classes like `bg-sk-primary`, `text-sk-accent-text`, and `border-sk-danger`. ## TypeScript Support For VS Code with Volar, add the global types to your `tsconfig.json`: ```json { "include": [ "src/**/*", "node_modules/@skewedaspect/sleekspace-ui/src/global.d.ts" ] } ``` WebStorm and IntelliJ IDEA work automatically via the included `web-types.json`. --- # Getting Started SleekSpace UI is a Vue 3 component library with a cyberpunk aesthetic. It provides themed components built on OKLCH colors, beveled corners, and runtime theming through CSS custom properties. ## Quick Start ### Minimal Example The only requirement is establishing a theme context. The simplest way is with `SkTheme`: ```vue ``` That's it. You can start using any SleekSpace component inside the theme context. If you're using `SkPage`, you can skip `SkTheme` entirely — see the next section. ### Recommended Setup with SkPage For most applications, you will want a proper page layout with a header, sidebar, and content area. `SkPage` provides this structure and can act as a theme provider directly via its `theme` prop — no `SkTheme` wrapper needed: ```vue ``` > **Note:** When `theme` is provided, `SkPage` sets `data-scheme` on its root element and provides theme context to all descendants — including portal components like dropdowns and modals. If you omit the `theme` prop, `SkPage` behaves as a pure layout component and you'll need an `SkTheme` wrapper instead. ### Why Use SkPage? `SkPage` is optional, but most applications will benefit from it: - **Full page layout structure** -- Provides header, sidebar, content, and footer regions in a single component. - **Built-in theme provider** -- Pass a `theme` prop to eliminate the `SkTheme` wrapper entirely. - **Semantic HTML** -- Uses `
`, `
`, `