VeanUI

https://veanui.com/
Admin
VeanUI is an accessible, TypeScript-first Vue 3 component system offering unstyled Aria primitives...
Tokens:689,894
Snippets:3,888
Trust Score:2.4
Update:4 hours ago
Show doc for...
Tokens:
Raw
### First example with SButton, SInput, and SCard

Source: https://veanui.com/overview/quick-start/

A simple example to verify the installation. It includes a button with a click handler, an input bound with v-model, and a card with header and footer slots. The script setup imports ref and defines the input value and click handler.

```vue
<template>
  <div class="p-4 space-y-4">
    <h1 class="text-2xl font-bold">VeanUI Example</h1>

    <SButton color="primary" @click="handleClick">Click</SButton>

    <SInput v-model="inputValue" placeholder="Enter text" class="w-64" />

    <SCard>
      <template #header>
        <h3>Card title</h3>
      </template>
      <p>This is the card content area.</p>
      <template #footer>
        <SButton size="small">Action</SButton>
      </template>
    </SCard>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const inputValue = ref('');

function handleClick() {
  alert('Button clicked!');
}
</script>
```

--------------------------------

### vean migrate usage examples

Source: https://veanui.com/cli/

Examples of running `vean migrate rebrand` in preview mode, applying changes with `--write`, and combining multiple opt-in flags.

```bash
vean migrate rebrand                       # preview
vean migrate rebrand --write               # apply
vean migrate rebrand -w --runtime-contract --cli --new-domain veanui.com
```

--------------------------------

### Install @vean/ui with pnpm, npm, or yarn

Source: https://veanui.com/overview/quick-start/

Install the @vean/ui package using your preferred package manager. The commands are shown for pnpm (recommended), npm, and yarn.

```bash
# pnpm (recommended)
pnpm add @vean/ui

# or npm
npm install @vean/ui

# or yarn
yarn add @vean/ui
```

--------------------------------

### vean.json configuration example

Source: https://veanui.com/cli/

Example configuration file for Vean UI. Defines icon library, UnoCSS theme settings, font choices, import aliases, and registry mappings.

```json
{
  "iconLibrary": "lucide",
  "uno": {
    "base": "zinc",
    "primary": "indigo",
    "size": "md",
    "radius": "md"
  },
  "font": {
    "sans": "inter",
    "heading": "inherit"
  },
  "aliases": {
    "ui": "#ui"
  },
  "registries": {}
}
```

--------------------------------

### Install @vean/aria with pnpm

Source: https://veanui.com/overview/quick-start/

Install the @vean/aria package for building your own design system. The command uses pnpm.

```bash
pnpm add @vean/aria
```

--------------------------------

### Install VeanUI skills with the skills CLI

Source: https://veanui.com/overview/skills/

Use the `skills` CLI to install the VeanUI skills package. The first command installs the default skills, while the next two target specific agents (cursor and claude-code). The last command installs globally.

```bash
npx skills add soybeanjs/vean-ui/skills
```

```bash
npx skills add soybeanjs/vean-ui/skills --agent cursor
npx skills add soybeanjs/vean-ui/skills --agent claude-code
```

```bash
npx skills add soybeanjs/vean-ui/skills --global
```

--------------------------------

### Import and use SButton component

Source: https://veanui.com/overview/installation/

Example of importing the SButton component from '@vean/ui' and using it in a Vue template.

```vue
<script setup lang="ts">
import { SButton } from '@vean/ui';
</script>

<template>
  <SButton>Click me</SButton>
</template>
```

--------------------------------

### Install new packages and remove old ones

Source: https://veanui.com/overview/migration/rebrand/

Run these commands to remove the old @soybeanjs packages and install the new @vean packages. The API names remain unchanged.

```bash
pnpm remove @soybeanjs/ui @soybeanjs/headless @soybeanjs/theme @soybeanjs/ui-uno
pnpm add @vean/ui @vean/aria @vean/theme @vean/unocss
```

--------------------------------

### Install @vean/ui via pnpm

Source: https://veanui.com/overview/introduction/

Install the VeanUI npm package as a dependency. This is the recommended path for most projects, enabling auto-import with unplugin-vue-components and tree-shaking.

```bash
pnpm add @vean/ui
```

--------------------------------

### Use top-of-page loading bar with SProgressProvider

Source: https://veanui.com/components/progress/

Mount `SProgressProvider` (or rely on `SConfigProvider`) and call the imperative API. The example starts the progress and stops it after 1200ms.

```vue
<script setup>
const load = () => {
  progress.start();
  setTimeout(() => progress.done(), 1200);
};
</script>
<template><SButton @click="load">Load</SButton></template>
```

--------------------------------

### Slot props: access table and engineColumn in cell slots

Source: https://veanui.com/components/table/

Every header/data-cell slot receives the engine table instance and engine column instance. This example shows using the table instance to get the total row count.

```html
<STable :columns="columns" :data="data" :row-key="row => row.id">
  <template #age="{ value, table }">
    {{ value }} ({{ table.getPreFilteredRowModel().flatRows.length }} rows total)
  </template>
</STable>
```

--------------------------------

### Initialize VeanUI CLI and add button component

Source: https://veanui.com/overview/introduction/

Use the vean CLI to copy components directly into your project for full source control. Run init first, then add the button component. Pull upstream updates with 'vean diff'.

```bash
npx @vean/cli@latest init
npx @vean/cli@latest add button
```

--------------------------------

### vean info command syntax

Source: https://veanui.com/cli/

Shows project configuration and available preset values. Use --json for JSON output.

```bash
vean info [options]
```

--------------------------------

### Install unplugin-vue-components

Source: https://veanui.com/overview/quick-start/

Install the unplugin-vue-components package as a dev dependency for auto-importing VeanUI components.

```bash
pnpm add -D unplugin-vue-components
```

--------------------------------

### progress.start()

Source: https://veanui.com/components/progress/

Shows the progress bar with the default start position and delay, then starts trickling.

```APIDOC
## progress.start()

### Description
Show the progress bar with the default start position and delay, then start trickling.

### Method
`start()`

### Parameters
None

### Returns
None
```

--------------------------------

### Build a command palette with items and placeholder

Source: https://veanui.com/components/command/

Pass `items` and a `placeholder` to render a basic command palette. The `@select` handler receives the selected value.

```html
<SCommand
  placeholder="Type a command..."
  :items="[
    { label: 'Search Emoji', value: 'emoji', icon: 'lucide:smile' },
    { label: 'Help', value: 'help', icon: 'lucide:help-circle', shortcut: ['command', 'h'] }
  ]"
  @select="onSelect"
/>
```

--------------------------------

### vean init command syntax

Source: https://veanui.com/cli/

Initializes a new VeanUI project or adds configuration to an existing one. Options control monorepo structure, UI directory, component size, style, colors, radius, preset, icon library, fonts, and confirmation behavior.

```bash
vean init [options]
```

--------------------------------

### Install individual skills with Claude Code

Source: https://veanui.com/overview/skills/

Commands to install the vean-ui and vean-aria skills directly from their GitHub directories using the Claude Code CLI.

```bash
claude skill add https://github.com/soybeanjs/vean-ui/tree/main/skills/skills/vean-ui
claude skill add https://github.com/soybeanjs/vean-ui/tree/main/skills/skills/vean-aria
```

--------------------------------

### Migration checklist commands

Source: https://veanui.com/overview/migration/rebrand/

Commands to verify the migration: check for old package names, check for old runtime contract selectors, and run typecheck and build. The first two expect no output.

```bash
# 1. Old package names should be gone
#    (cva / colord / ui-x are out of scope and may still appear)
rg "@soybeanjs/(headless|ui|theme|ui-uno|ui-skills)" . --glob '!node_modules' --glob '!*lock*'
#    Expect: no output

# 2. The runtime contract should be gone
#    (unless you intentionally kept old selectors)
rg "data-soybean-|--soybean-" . --glob '!node_modules'
#    Expect: no output

# 3. Typecheck and build
pnpm typecheck && pnpm build
```

--------------------------------

### Component file structure after CLI add

Source: https://veanui.com/overview/installation/

Shows the directory structure created when adding the button component.

```text
src/ui/
├── components/
│   └── button/
│       ├── button.vue
│       ├── index.ts
│       └── types.ts
├── styles/
│   └── button.ts
└── theme/
    └── index.ts
```

--------------------------------

### vean migrate command syntax

Source: https://veanui.com/cli/

Shows the basic command syntax for `vean migrate`.

```bash
vean migrate [migration] [options]
```

--------------------------------

### Install VeanUI CLI with pnpm

Source: https://veanui.com/cli/

Adds the @vean/cli package as a dev dependency using pnpm.

```bash
pnpm add -D @vean/cli
```

--------------------------------

### Replace sbean CLI commands with vean CLI commands

Source: https://veanui.com/overview/migration/rebrand/

Shows the old and new commands for adding a component and initializing a project. The old commands use 'sbean' while the new ones use '@vean/cli@latest' or 'dlx @vean/cli@latest'.

```bash
- npx sbean add button
+ npx @vean/cli@latest add button

- pnpm sbean init
+ pnpm dlx @vean/cli@latest init
```
Tokens:
Raw