SoybeanUI

Vue 3 UI library with styled and headless packages.

Quick start

• Prefer @soybeanjs/ui for ready-to-use S* components.
• Prefer @soybeanjs/headless when you want SoybeanUI logic and accessibility without bundled styles.
• Load REFERENCE.md for setup, docs routes, and which deeper reference to open next.
• Load references/headless-vs-styled.md when deciding between @soybeanjs/ui and @soybeanjs/headless.
• Load references/theming.md for SConfigProvider, theme vocabulary, locale, and direction.
• Load references/components.md when you need component categories or are not sure which component fits.
• Then load only the exact components/*.md files you need.

Available guidance

Loading files

• REFERENCE.md first for setup and the right follow-up reference.
• references/headless-vs-styled.md when the user is choosing packages or mixing both layers.
• references/theming.md for theme, SConfigProvider, locale, nonce, or direction questions.
• references/components.md if you need to browse the library or narrow down the right component family.
• components/*.md only for the components directly involved in the task.
• If the local skill files are insufficient, use the docs routes https://ui.soybeanjs.cn/llms.txt and https://ui.soybeanjs.cn/llms-full.txt as broader context.

Key concepts

Basic patterns

import '@soybeanjs/ui/styles.css';

import Components from 'unplugin-vue-components/vite';
import UiResolver from '@soybeanjs/ui/resolver';

Components({
  resolvers: [UiResolver()]
});

<template>
  <SConfigProvider :theme="{ theme: { primary: 'indigo' }, size: 'md' }" dir="rtl">
    <App />
  </SConfigProvider>
</template>

Notes

• For repo-internal component authoring or SoybeanUI source changes, use the soybean-ui-develop skill instead.
• Regenerate the component reference files with pnpm sui gen skills after docs or generated API data changes.