# vp-ui

**Repository Path**: lauset/vp-ui

## Basic Information

- **Project Name**: vp-ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-26
- **Last Updated**: 2026-06-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vp UI

> Vplat UI component library.

## Packages

| Package | Description | Status |
|---------|-------------|--------|
| [`@lauset/vp-ui`](./packages/vue) | Vue 3 component library | ✅ Active |
| [`@lauset/vp-ui-react`](./packages/react) | React 19 port | 🚧 Reserved |

---

## Quick Start

```bash
pnpm install @lauset/vp-ui # install from local file
```

## Usage (Vue 3)

### Full install (global registration)

```ts
import VpUi from '@lauset/vp-ui'
import { createApp } from 'vue'
import '@lauset/vp-ui/style'

createApp(App).use(VpUi).mount('#app')
```

### Per-component (tree-shaking)

```ts
import { VpAiFloatButton, VpCard } from '@lauset/vp-ui'
```

## Components

| Component | Description |
|-----------|-------------|
| `VpAiFloatButton` | Floating button with drawer and overlay |
| `VpCard` | Card with expand/collapse support |
| `VpTableToolbar` | Table toolbar component |
| `VpTopbar` | Top navigation bar component |

## Styles

The library ships **two style layers** you can import independently:

```
packages/vue/src/styles/
├── index.scss          ← main entry (@use this to get everything)
├── vars.scss           ← all SCSS variables (override before @use)
├── base.scss           ← vp-ui component styles
└── eui/                ← Element Plus overrides
    ├── menu.scss
    ├── home.scss
    ├── page.scss
    └── ...
```

---

## Development

```bash
# watch mode
pnpm dev

# type check
pnpm typecheck

# build all packages
pnpm build
```

## Roadmap

- [x] Repo scaffold (monorepo, pnpm workspaces)
- [x] tsdown build (ESM + CJS + `.d.ts`)
- [ ] Tailwind CSS v4 (CSS-first config)
- [ ] React 19
- [ ] More components…