77 components for Vue 3.

An opinionated component library — accessible, themeable primitives and the application shell to hang them on.

$ pnpm add @octans/ui

vue 3.5+ · vue-router optional · MIT

Start here

quick start →

Install, register the plugin, render your first Card. Copyable snippets for pnpm, npm, yarn and a plain script tag.

kitchen sink →

Every component on one page, live. Switch theme or language from the toolbar and watch the lot follow.

github ↗

Source, issues and the contributing guide. MIT licensed — fork it, file a bug, or send a pull request.

theme builder →

Pick a seed colour and every ramp and semantic token follows, dark mode included. Save it and preview any story in it.

What's in it

Forms 22

Layout 13

Feedback 10

Data display 9

Utilities 6

Navigation 5

Typography 5

Overlays 4

Actions 3

Plus the shell: AppFrame, Page, GlobalNav and Navigation — the scaffolding an admin app needs before it can show a single button.

Usage

import { createApp } from 'vue'
import Octans from '@octans/ui'
import '@octans/ui/style.css'

createApp(App).use(Octans).mount('#app')
// $ui.toast(), $ui.confirm(), $t() — available in every template

Components import individually too, if you would rather not install the plugin: import { Button, Card } from '@octans/ui'.

Also in the docs

Working with an AI agent

The docs above are a single-page app, so an agent that fetches one gets the shell rather than the page. These two are plain text, written for that.

the skill ships in the package — symlink node_modules/@octans/ui/skills/octans-ui into .claude/skills/ or .agents/skills/. one file, any agent that reads the open standard.