SolandaUI

Web Components UI library — framework agnostic, zero dependencies, 15 KB gzip for all 24 components.

Works with Vue, Nuxt, React, Angular, Svelte, Astro, or plain HTML. No peer dependencies. No framework runtime bundled in.

npm install @federa/solanda-ui

Why SolandaUI

| | SolandaUI | Spectrum WC (Adobe) | Web Awesome (ex-Shoelace) | Shoelace | |---|:---:|:---:|:---:|:---:| | Bundle gzip (full) | ~15 KB | ~63 KB | ~90 KB+ | ~200 KB | | Zero dependencies | ✅ | ❌ | ❌ | ❌ | | Framework agnostic | ✅ | ✅ | ✅ | ✅ | | Tree-shakeable | ✅ | ✅ | ✅ | ✅ | | TypeScript | ✅ | ✅ | ✅ | ✅ | | Free & open source | ✅ (AGPL-3.0) | ✅ | Freemium | ✅ (LTS only) |

SolandaUI is 4× lighter than Spectrum and 13× lighter than Shoelace for the full bundle. For typical usage (tree-shaking), a single component import is under 10 KB gzip including its Shadow DOM styles.

Features

• Zero dependencies — Custom Elements v1 + Shadow DOM, no framework runtime
• 15 KB gzip — full bundle with all 24 components and their CSS
• Tree-shakeable — import only the components you use, pay only for what you ship
• Framework agnostic — works with Vue, Nuxt, React, Angular, Svelte, Astro, or vanilla JS
• TypeScript — full type safety with .d.ts files for every component
• 5 built-in themes — Solanda, Social Neutral, Catppuccin, Gruvbox, Tokyo Night
• SSR ready — server-side rendering support out of the box
• Accessible — ARIA attributes, keyboard navigation, and semantic roles

Usage

Import per component (recommended — tree-shakeable)

import '@federa/solanda-ui/sl-button'
import '@federa/solanda-ui/sl-input'
import '@federa/solanda-ui/css'

Import all components

import '@federa/solanda-ui'
import '@federa/solanda-ui/css'

CDN / single minified bundle (86 KB min, 15 KB gzip)

<link rel="stylesheet" href="https://unpkg.com/@federa/solanda-ui/dist/tokens/index.css">
<script type="module" src="https://unpkg.com/@federa/solanda-ui/dist/index.min.js"></script>

Or via npm:

import '@federa/solanda-ui/min'
import '@federa/solanda-ui/css'

Framework integration

Vue 3

<script setup>
import '@federa/solanda-ui/sl-button'
import '@federa/solanda-ui/sl-input'
</script>

<template>
  <sl-button variant="primary" @click="handleClick">Click me</sl-button>
  <sl-input v-model="text" placeholder="Enter text..." />
</template>

v-model on custom events:

<sl-input
  :value="text"
  @update:value="text = $event.detail.value"
/>

Nuxt 3

// nuxt.config.ts
export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: tag => tag.startsWith('sl-')
    }
  },
  css: ['@federa/solanda-ui/css']
})

React

import '@federa/solanda-ui/sl-button'
import '@federa/solanda-ui/sl-input'
import '@federa/solanda-ui/css'

function App() {
  return (
    <>
      <sl-button variant="primary" onClick={e => console.log(e.detail)}>
        Click me
      </sl-button>
      <sl-input
        value={text}
        onInput={e => setText(e.detail.value)}
        placeholder="Enter text..."
      />
    </>
  )
}

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

<sl-button variant="primary" (click)="handleClick()">Click me</sl-button>
<sl-input [value]="text" (input)="text = $event.detail.value"></sl-input>

Theme management

import { themeManager } from '@federa/solanda-ui/theme'

themeManager.setTheme('dark')      // 'light' | 'dark' | 'system'
themeManager.toggleTheme()
themeManager.setPreset('catppuccin') // switch color palette at runtime

Override tokens

:root {
  --sl-color-primary: #your-color;
  --sl-font-family-base: 'Your Font', sans-serif;
}

Dark mode (CSS only)

[data-theme="dark"] {
  --sl-hsl-background: 222 20% 8%;
  --sl-hsl-foreground: 210 20% 96%;
}

Components

24 components ready for production:

| Component | Tag | Description | |---|---|---| | Button | <sl-button> | 6 variants, 5 sizes, icon support | | Button Group | <sl-button-group> | Radio/checkbox group of buttons | | Input | <sl-input> | Text, email, password, number… | | Textarea | <sl-textarea> | Multiline text input | | Select | <sl-select> | Dropdown select | | Checkbox | <sl-checkbox> | With label and indeterminate state | | Switch | <sl-switch> | Toggle switch | | Label | <sl-label> | Form label | | Badge | <sl-badge> | 7 variants | | Avatar | <sl-avatar> | Image + fallback initials | | Card | <sl-card> | With header, body, and actions slots | | Tabs | <sl-tabs> | Tab list | | Tab | <sl-tab> | Individual tab | | Tab Content | <sl-tab-content> | Tab panel | | Dialog | <sl-dialog> | Modal dialog | | Tooltip | <sl-tooltip> | Hover tooltip with placement | | Popover | <sl-popover> | Click-triggered floating panel | | Dropdown Menu | <sl-dropdown-menu> | Context/action menu | | Toast | <sl-toast> | Programmatic notifications | | Step Indicator | <sl-step-indicator> | Progress steps | | Icon | <sl-icon> | SVG icon host | | Section Header | <sl-section-header> | Eyebrow + title + description | | Feature Card | <sl-feature-card> | Icon + title + description card | | Showcase Card | <sl-showcase-card> | Demo container card |

CSS exports

import '@federa/solanda-ui/css'                        // full (tokens + default theme)
import '@federa/solanda-ui/css/tokens'                 // design tokens only
import '@federa/solanda-ui/css/themes/solanda'         // Solanda palette
import '@federa/solanda-ui/css/themes/social-neutral'  // Social Neutral palette
import '@federa/solanda-ui/css/themes/catppuccin'      // Catppuccin palette
import '@federa/solanda-ui/css/themes/gruvbox'         // Gruvbox palette
import '@federa/solanda-ui/css/themes/tokyo-night'     // Tokyo Night palette

Browser support

Chrome/Edge (latest) · Firefox (latest) · Safari (latest) · iOS Safari · Chrome Mobile

Publishing a new release

The CI pipeline publishes automatically to npm when a git tag with the format vX.Y.Z is pushed. The tag value is used to set the version in package.json before publishing — no manual bump needed.

git tag v1.2.3
git push --follow-tags

The pipeline will:

1. Update package.json version to match the tag (v1.2.3 → 1.2.3)
2. Publish the package to npm as @federa/[email protected]
3. Create a GitLab release

The package.json in the repository is not committed with the bumped version — the update happens only inside the CI job before publishing.

License

AGPL-3.0