SoybeanHeadless

SoybeanHeadless is a collection unstyled components for Vue 3. It is designed to be lightweight and easy to use.

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 | Divider | ✅ Completed | Separator | | | 18 | 1 | Drawer | ✅ Completed | Sheet | | | 19 | 1 | DropdownMenu | ✅ Completed | | ✨ support hover trigger | | 20 | 1 | Form | ✅ Completed | | | | 21 | 1 | Icon | ✅ Completed | | ✨ based on iconify | | 22 | 1 | Input | ✅ Completed | | | | 23 | 1 | Kbd | ✅ Completed | | | | 24 | 1 | Label | ✅ Completed | | | | 25 | 1 | Layout | ✅ Completed | | | | 26 | 1 | Link | ✅ Completed | | | | 27 | 1 | List | ✅ Completed | | | | 28 | 1 | Listbox | ✅ Completed | | | | 29 | 1 | Menu | ✅ Completed | | | | 30 | 1 | NavigationMenu | ✅ Completed | | | | 31 | 1 | NumberInput | ✅ Completed | NumberField | | | 32 | 1 | Pagination | ✅ Completed | | | | 33 | 1 | Password | ✅ Completed | | | | 34 | 1 | Popover | ✅ Completed | | | | 35 | 1 | RadioGroup | ✅ Completed | | ✨ support radio card | | 36 | 1 | Segment | ✅ Completed | | | | 37 | 1 | Select | ✅ Completed | | support virtualized | | 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 | | 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

✅ 10 / total: 14

| 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 | useMessage | | | | 11 | 1 | useModal | | | | 12 | 1 | useNotification | | | | 13 | 1 | usePresence | ✅ Completed | | | 14 | 2 | useLoadingBar | | |