A powerful, elegant Vue 3 component system with headless primitives and ready-to-use styled wrappers.
Choose the distribution mode that fits your workflow — npm package for quick integration, or CLI copy-paste for full source control.
Install @soybeanjs/ui as a dependency. Auto-import, tree-shaking, and seamless updates via your package manager.
Copy source code into your project with sbean CLI. Full control, full customization — you own the code.
Install the package, wire the styling layer, and get the first screen rendering end to end.
Review how the unstyled headless layer and the styled UI layer divide responsibility before choosing an integration strategy.
Narrow the component choice set quickly by scanning primitives, patterns, and utilities by category.
Learn how tokens, variants, and ui slot overrides work together before deeper customization.
@soybeanjs/headless focuses on state, behavior, and accessibility semantics without shipping any visual styling.
@soybeanjs/ui ships S-prefixed styled components so common product surfaces can be delivered without rebuilding presentation from scratch.
Follows WAI-ARIA patterns with keyboard navigation, focus management, and semantic state handling included.
Built with TypeScript so components, slots, and configuration surfaces stay explicit during implementation.
Override local styling precisely through ui slot maps instead of rewriting entire components.
Variants are organized with UnoCSS and @soybeanjs/cva so design tokens and themes stay scalable.
Covers general UI, forms, navigation, overlays, and data display for the screens teams build most often.
Works smoothly with Nuxt, auto-import workflows, and living examples that shorten adoption time.
If you want to feel the system quickly, these components show the most representative interaction surfaces.
A foundational entry point for actions, state transitions, and forward motion in a flow.
A reliable starting point for entry, search, and richer form composition.
Covers filtering, mapping, and structured option selection in frequent product scenarios.
A core overlay capability for confirmations, editing flows, and interruptive tasks.
A key component for dense data reading, comparison, and structured presentation.
Aligns field composition, validation, and submission feedback inside one workflow.