Nuxt components that follow your design system
Selaras is a set of accessible Vue components for Nuxt, built on Reka UI and Tailwind CSS v4. Colors, radii and shadows are CSS variables, so the components take on your brand instead of imposing one.
Pre-1.0 Version 0.8.0. APIs can still change before 1.0.
Drag to recolor this section.
Built on a few firm decisions
Themed with CSS variables
Every color, radius and shadow is a custom property. Recolor a role by changing one value.
How theming worksOne prop to customize
Pass classes to any part of a component through its ui prop. They merge with the defaults instead of fighting them.
Customize a componentAccessible primitives
Built on Reka UI, so keyboard support, focus management and ARIA come with every component.
Accessibility approachReady for small screens
Select, date and color pickers can switch to a full modal on phones, where a popover is too cramped.
See SelectMotion in CSS
Open, close and hover transitions run on data attributes, and respect reduced-motion settings.
How motion worksTyped throughout
Props, emits and slots are exported for every component, for wrappers that stay in sync.
TypeScript guideWhat's included
Components
- ElementsButtons, badges, avatars, chips and other building blocks14
- FormsInputs, selects, date and color pickers, uploads and field wiring18
- DataTables with sorting, pagination and virtual scroll, and a calendar3
- NavigationTabs, menus, breadcrumbs, steppers and trees8
- OverlaysModals, drawers, menus, popovers, toasts and a command palette10
- LayoutThe app shell, header, cards, splitters and theme scopes10
- TypographyProse styles, callouts, code blocks and file trees7
Start in three steps
Install the package
Tailwind CSS is a peer dependency, so your project owns its version.
Terminalnpm install @sewadah/selaras tailwindcss
Register the module
Components are auto-imported with an S prefix, like SButton.
nuxt.config.tsexport default defineNuxtConfig({ modules: ['@sewadah/selaras'], css: ['~/assets/css/main.css'], })Import the styles and wrap your app
SApp provides the shared context that tooltips, toasts and overlays need.
assets/css/main.css@import "tailwindcss"; @import "@sewadah/selaras";