https://github.com/soybeanjs/soybean-ui
An elegant and accessible UI library like shadcn for Vue3
https://github.com/soybeanjs/soybean-ui
radix-vue shadcn-ui uikit unocss vue3
Last synced: about 21 hours ago
JSON representation
An elegant and accessible UI library like shadcn for Vue3
- Host: GitHub
- URL: https://github.com/soybeanjs/soybean-ui
- Owner: soybeanjs
- License: mit
- Created: 2022-12-20T13:14:46.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-06-10T14:35:40.000Z (7 months ago)
- Last Synced: 2025-06-10T16:27:38.543Z (7 months ago)
- Topics: radix-vue, shadcn-ui, uikit, unocss, vue3
- Language: Vue
- Homepage: https://soybean-ui.com
- Size: 3.95 MB
- Stars: 132
- Watchers: 2
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# SoybeanUI
English | [δΈζ](./README.zh-CN.md)
[](./LICENSE)
[](https://github.com/soybeanjs/soybean-ui)
SoybeanUI is an elegant, modern, accessible and high-quality UI component library with shadcn-like design for Vue 3, built on top of a robust headless foundation. It provides a comprehensive set of accessible, customizable, and performant components.
## π Architecture
SoybeanUI consists of two main packages:
- **@soybeanjs/headless**: The logic layer. It handles state management, accessibility (A11y), keyboard interactions, and focus management. It is completely unstyled, giving you maximum control if you want to build your own design system.
- **@soybeanjs/ui**: The presentation layer. It wraps the headless components with beautiful, customizable styles using UnoCSS (via `tailwind-variants`). It is ready to use out of the box.
## π¦ Installation
### Using the Styled UI Library (Recommended)
If you want ready-to-use components with a modern design:
```bash
pnpm add @soybeanjs/ui
```
### Using the Headless Library
If you want to build your own design system from scratch:
```bash
pnpm add @soybeanjs/headless
```
## π Usage
### @soybeanjs/ui
1. **Import Styles**
Import the CSS file in your main entry file (e.g., `main.ts`):
```ts
import '@soybeanjs/ui/styles.css';
```
2. **Global Registration (Optional)**
You can register components globally or import them on demand.
3. **On-demand Import (Recommended)**
We recommend using `unplugin-vue-components` for auto-importing components.
```ts
// vite.config.ts
import Components from 'unplugin-vue-components/vite';
import UiResolver from '@soybeanjs/ui/resolver';
export default defineConfig({
plugins: [
Components({
resolvers: [UiResolver()]
})
]
});
```
4. **Nuxt Module**
```ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@soybeanjs/ui/nuxt']
});
```
### @soybeanjs/headless
The headless components provide the functionality without the styles.
```vue
import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from '@soybeanjs/headless';
Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
```
## β¨ Features
- **Accessible**: Follows WAI-ARIA patterns for accessibility.
- **Headless**: Logic and styles are separated.
- **Type Safe**: Written in TypeScript with full type support.
- **Customizable**: Built with UnoCSS and `tailwind-variants` for easy theming.
- **Lightweight**: Tree-shakable components.
## π Credits
- [reka-ui](https://github.com/unovue/reka-ui)
- [oku-ui](https://github.com/oku-ui/primitives)
- [shadcn-vue](https://github.com/unovue/shadcn-vue)
- [shadcn/ui](https://github.com/shadcn/ui)
- [nuxt-ui](https://github.com/nuxt/ui)
- [unocss](https://github.com/unocss/unocss)
## πΊοΈ Roadmap
### Components
β
: Completed β¨: Implemented
β
46 / total: 107
| No | Priority | Name | Status | Alias | π Note |
| --- | -------- | --------------- | ------------ | -------------------- | ------------------------ |
| 1 | 1 | Accordion | β
Completed | | |
| 2 | 1 | Alert | β
Completed | | |
| 3 | 1 | AlertDialog | β
Completed | | |
| 4 | 1 | Arrow | β
Completed | | |
| 5 | 1 | AspectRatio | β
Completed | | |
| 6 | 1 | Avatar | β
Completed | | |
| 7 | 1 | Badge | β
Completed | Chip | |
| 8 | 1 | Breadcrumb | β
Completed | | |
| 9 | 1 | Button | β
Completed | | β¨ support loading |
| 10 | 1 | Card | β
Completed | | |
| 11 | 1 | Checkbox | β
Completed | | β¨ support checkbox card |
| 12 | 1 | Collapsible | β
Completed | | |
| 13 | 1 | Command | β
Completed | | |
| 14 | 1 | ConfigProvider | β
Completed | | |
| 15 | 1 | ContextMenu | β
Completed | | |
| 16 | 1 | Dialog | β
Completed | | |
| 17 | 1 | Drawer | β
Completed | Sheet | |
| 18 | 1 | DropdownMenu | β
Completed | | β¨ support hover trigger |
| 19 | 1 | Form | β
Completed | | |
| 20 | 1 | Icon | β
Completed | | β¨ based on iconify |
| 21 | 1 | Input | β
Completed | | |
| 22 | 1 | Kbd | β
Completed | | |
| 23 | 1 | Label | β
Completed | | |
| 24 | 1 | Layout | β
Completed | | |
| 25 | 1 | Link | β
Completed | | |
| 26 | 1 | List | β
Completed | | |
| 27 | 1 | Listbox | β
Completed | | |
| 28 | 1 | Menu | β
Completed | | |
| 29 | 1 | NavigationMenu | β
Completed | | |
| 30 | 1 | NumberInput | β
Completed | NumberField | |
| 31 | 1 | Pagination | β
Completed | | |
| 32 | 1 | Password | β
Completed | | |
| 33 | 1 | Popover | β
Completed | | |
| 34 | 1 | RadioGroup | β
Completed | | β¨ support radio card |
| 35 | 1 | Segment | β
Completed | | |
| 36 | 1 | Select | β
Completed | | |
| 37 | 1 | Separator | β
Completed | Divider | |
| 38 | 1 | Switch | β
Completed | | β¨ support switch card |
| 39 | 1 | Tabs | β
Completed | | |
| 40 | 1 | Tag | β
Completed | Badge(shadcn-ui) | |
| 41 | 1 | Textarea | β
Completed | | β¨ support auto size |
| 42 | 1 | Toast | β
Completed | Sonner | migrate from vue-sonner |
| 43 | 1 | Tooltip | β
Completed | | |
| 44 | 1 | Tree | β
Completed | | β¨ support virtualized |
| 45 | 1 | TreeMenu | β
Completed | | |
| 46 | 1 | Virtualizer | β
Completed | | |
| 47 | 1 | VisuallyHidden | β
Completed | | |
| 48 | 2 | ColorPicker | | | |
| 49 | 2 | Combobox | | | support virtualized |
| 50 | 2 | DataTable | | | support virtualized |
| 51 | 2 | Menubar | | | |
| 52 | 2 | PinInput | | InputOPT, OPTInput | |
| 53 | 2 | Popconfirm | | | |
| 54 | 2 | Progress | | | include circle |
| 55 | 2 | ScrollArea | | | |
| 56 | 2 | Skeleton | | | |
| 57 | 2 | Slider | | | |
| 58 | 2 | Table | | | |
| 59 | 2 | Toggle | | | |
| 60 | 2 | ToggleGroup | | | |
| 61 | 3 | BottomSheet | | Drawer(shadcn-ui) | |
| 62 | 3 | Calendar | | | v-calendar |
| 63 | 3 | Carousel | | | |
| 64 | 3 | DateField | | | |
| 65 | 3 | DatePicker | | | |
| 66 | 3 | DateRangeField | | | |
| 67 | 3 | DateRangePicker | | | |
| 68 | 3 | Editable | | | |
| 69 | 3 | HoverCard | | | |
| 70 | 3 | RangeCalendar | | | v-calendar |
| 71 | 3 | Resizable | | | |
| 72 | 3 | Splitter | | | |
| 73 | 3 | Stepper | | | |
| 74 | 3 | TagsInput | | | |
| 75 | 3 | TimeField | | | |
| 76 | 3 | Timeline | | | ui things |
| 77 | 3 | TimePicker | | | element-plus |
| 78 | 3 | Toolbar | | | |
| 79 | 4 | Affix | | | |
| 80 | 4 | Anchor | | | |
| 81 | 4 | AutoComplete | | | support virtualized |
| 82 | 4 | Backtop | | | |
| 83 | 4 | Cascader | | | support virtualized |
| 84 | 4 | Clipboard | | | |
| 85 | 4 | Code | | | |
| 86 | 4 | Comment | | | |
| 87 | 4 | Countdown | | | |
| 88 | 4 | CurrencyInput | | | |
| 89 | 4 | Descriptions | | | |
| 90 | 4 | Ellipsis | | | |
| 91 | 4 | Empty | | | |
| 92 | 4 | Equation | | | based on katex |
| 93 | 4 | InfiniteScroll | | | |
| 94 | 4 | Mention | | | element-plus |
| 95 | 4 | Navbar | | | |
| 96 | 4 | NumberAnimation | | | naive-ui |
| 97 | 4 | PageTab | | | |
| 98 | 4 | QRCode | | | |
| 99 | 4 | Rating | | Rate | element-plus |
| 100 | 4 | Result | | | |
| 101 | 4 | Spinner | | Loader, Spin | github ldrs |
| 102 | 4 | Statistic | | | |
| 103 | 4 | Tour | | | |
| 104 | 4 | Transfer | | | |
| 105 | 4 | TreeSelect | | | |
| 106 | 4 | Typography | | | shadcn-ui |
| 107 | 4 | Upload | | FileUpload, Dropfile | |
| 108 | 4 | Watermark | | | |
### Utilities
β
12 / total: 13
| No. | Priority | Name | Status | π Note |
| --- | -------- | ------------------- | ------------ | -------------- |
| 1 | 1 | Popper | β
Completed | |
| 2 | 1 | Portal | β
Completed | alias Teleport |
| 3 | 1 | Primitive | β
Completed | |
| 4 | 1 | RovingFocus | β
Completed | |
| 5 | 1 | Slot | β
Completed | |
| 6 | 1 | useCollection | β
Completed | |
| 7 | 1 | useDismissableLayer | β
Completed | |
| 8 | 1 | useFocusGuards | β
Completed | |
| 9 | 1 | useFocusScope | β
Completed | |
| 10 | 1 | usePresence | β
Completed | |
| 11 | 1 | useDialog | β
Completed | |
| 12 | 1 | useToast | β
Completed | |
| 13 | 2 | useLoadingBar | | |