@sewadah/selaras

Selaras

A customizable Vue component library for Nuxt, built on Reka UI and Tailwind CSS v4. Build forms, navigation, data tables, overlays, and application layouts with typed APIs, keyboard interactions, and light and dark modes.

Selaras v1 is available on npm.

Documentation · Components · Blocks · Templates · Release notes

Features

• Ready-to-use components. Form controls, Select, Autocomplete, Listbox, TransferList, Table, NavigationMenu, Modal, Drawer, Toast, and more, auto-imported with an S prefix.
• CSS-first theming. Customize semantic colors, surfaces, radius, and shadows through CSS variables, with support for light, dark, and system appearance.
• Consistent customization. Use props, slots, and :ui overrides locally, app.config.ts for shared defaults, or STheme for a subtree.
• Adaptive interfaces. Present supported controls as popovers, modals, or drawers according to the available screen space.
• Application building blocks. Dashboard and documentation layouts, copyable blocks, and starter templates.
• Agent support. Public Markdown documentation, an installable skill, and an optional local MCP server with component contracts and examples.

Requirements

Use an existing Nuxt application with:

• Nuxt ^4.5.2.
• Tailwind CSS ^4.3.0.
• Node.js ^22.19.0 || ^24.11.0 || >=26.0.0.

Nuxt supplies Vue. Selaras configures the Tailwind Vite plugin and installs Nuxt Icon and Nuxt Color Mode automatically.

Quick setup

1. Install

npm install @sewadah/selaras tailwindcss

Or use your preferred package manager:

pnpm add @sewadah/selaras tailwindcss
bun add @sewadah/selaras tailwindcss

Install the default icon collection locally so icons do not depend on runtime requests to Iconify:

npm install -D @iconify-json/hugeicons

See Icons to use other collections.

2. Configure Nuxt

Register the module and your stylesheet in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@sewadah/selaras'],
  css: ['~/assets/css/main.css'],
})

3. Add the styles

Create app/assets/css/main.css with these imports in order:

@import "tailwindcss";
@import "@sewadah/selaras";
@import "#selaras/tailwind.css";

The generated #selaras/tailwind.css entry connects component classes and adaptive breakpoints to your application's Tailwind theme.

4. Add the app provider

Wrap your application once in SApp in app/app.vue:

<template>
  <SApp>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </SApp>
</template>

SApp provides shared tooltip behavior and the renderers used by the programmatic overlay composables. Toasts need an SToast component where you want them rendered; see the App guide for details.

5. Use components

Create app/pages/index.vue, or add components to an existing page:

<script setup lang="ts">
const name = ref('')
</script>

<template>
  <main class="mx-auto max-w-md space-y-6 px-6 py-12">
    <div class="flex items-center justify-between gap-4">
      <h1 class="text-2xl font-semibold">
        Welcome to Selaras
      </h1>
      <SColorModeToggle />
    </div>

    <SFormField label="Your name">
      <SInput v-model="name" placeholder="Enter your name" />
    </SFormField>
    <p v-if="name">
      Hello, {{ name }}!
    </p>

    <SButton as="a" href="https://selarasui.my.id/components/elements/button">
      Explore components
    </SButton>
  </main>
</template>

Start your application:

npm run dev

No component imports are needed. See Installation for additional setup options and Nuxt configuration for module settings.

Customization

Change design tokens in your stylesheet, after the imports:

:root {
  --selaras-radius-base: 0.5rem;
}

Override a component's slots with :ui:

<SButton :ui="{ base: 'font-semibold' }">
  Save changes
</SButton>

Use global configuration to share styles and defaults, or scoped themes to style part of an application. The theming guides cover color roles, complete themes, and all customization layers.

Documentation

• Component usage
• Icons
• Messages and text
• Color modes
• Adaptive interfaces
• Copyable blocks
• Starter templates

Agent support

Install the Selaras skill from your application directory:

npx skills add sewadahapp/selaras --skill selaras

The optional @sewadah/selaras-mcp package provides a local stdio MCP server for documentation search, component discovery, and Vue examples matching your installed Selaras version. It needs no hosted service or API key.

See the agent support guides for skill installation options, MCP configuration, and llms.txt exports.

Contributing

See the contribution guide for local development, validation, compatibility checks, and release commands. Report bugs and suggest improvements through GitHub issues.

License

MIT, copyright Sewadah.