SolandaUI: Komponenter med identitet

Prosjektoversikt

SolandaUI er et produksjonsklart webkomponent-bibliotek (v1.0 stabilt) født av en overbevisning: grensesnittkomponenter bør ikke være avhengige av noe spesifikt rammeverk. Navngitt etter nabolaget i Quito etablert i 1984 — i live langt utover sine opprinnelige grenser — er SolandaUI en velordnet grunn som hvert team gjør til sitt eget. Det fungerer i Vue, React, Angular og ren HTML, fordi det ikke tilhører noen enkelt rammeverk: det tilhører plattformen.

Biblioteket er bygd på Custom Elements v1 og Shadow DOM: samme komponent fungerer i alle stacker uten omslag, adaptere eller rammeverk-runtime. Fordi den ikke tilhører noen enkelt rammeverk: den tilhører plattformen.

Hvorfor SolandaUI?

En klar plan som team tar i bruk, tilpasser, og tar langt utover hva originaldesignen antok.

Ingen rammeverklåsning

Skriv det en gang. Bruk det overalt.

<!-- Ingen oppsett nødvendig: importer og bruk -->
<script type="module">
  import '@federa/solanda-ui/sl-button'
</script>
<sl-button variant="default" size="lg">Lagre endringer</sl-button>

Lett

~27 KB gzip for hele biblioteket. Med tree-shaking betaler du bare for det du bruker:

6 innebygde temaer

Fem paletter med egen historie, i lys og mørk, pluss den neutrale basen:

1. Solanda — Terrakotta og andesk betong (standardtema)
2. Social Neutral — Støtt og nøytral, for seriøse produkter
3. Catppuccin — Myk pastel, elsket av samfunnet
4. Gruvbox — Varm retro fra terminal-inspirasjon
5. Tokyo Night — Nattlig neon med høy kontrast
6. Nord — Arkisk, blå og rolig

Tilgjengelighet

Native ARIA-roller, fokus-feller i overlays, full tastaturnavigering i hver komponent. Tastatur først.

Design tokens

Hele systemet styres via CSS-custom-properties. Ditt merkevare kommer inn som variabler:

--sl-hsl-primary
--sl-radius-lg
--sl-spacing-4
--sl-shadow-md
--sl-font-family-base

Bytt ut tokenene og biblioteket tilpasser din merkevare uten motstand.

Utvikleropplevelse

TypeScript + JSDoc

Fulltype-definisjoner for hver komponent og egenskap. Autoutfylling i editoren uten noen konfigurasjon.

custom-elements.json

Generert i hver build slik at editorer og verktøy forstår API-en.

llms.txt

Automatisk generert fil slik at AI-assistentene (Claude, Copilot, osv.) kjenner biblioteket like godt som deg.

Installasjon

npm install @federa/solanda-ui

Ingen oppstegstrinn. Ingen polyfills. Ingen avhengigheter.

Arkitektur

Custom Elements v1 + Shadow DOM

Hver komponent er en avgrenset webkomponent. Ingen runtime, ingen Virtual DOM, ingen React. Nettleseren forstår den opprinnelig.

Tree-shakeable

Importer bare det du trenger:

import '@federa/solanda-ui/sl-button'
import '@federa/solanda-ui/sl-dialog'
import '@federa/solanda-ui/sl-input'
// ~6 KB totalt, ikke 27 KB

SSR Ready

Støtte for server-side rendering. Komponentene er inaktive til JS lastes i klienten, og hydrering er automatisk.

Prosjektmetrikker

• 37 komponenter (49 custom elements) som dekker skjemaer, navigasjon, overlays og layout
• 17 npm-releaser publisert
• 12 formelle releaser siden opprettelse (mars 2026)
• 49 commits på hovedrepository-en
• Lisens: AGPL-3.0
• Avhengigheter: 0 (bare opprinnelig nettleser Custom Elements + Shadow DOM)

Reelle brukskasus

Hva demonstrerer dette prosjektet?

1. Plattform-nivå komponentarkitektur: Å bygge på standard Web Components betyr at koden overlever rammeverk-utdatering. Du er ikke bundet til React, Angular eller Vue sine livssykluser.

2. Skalerbar designsystem: Design-token lar et enkelt bibliotek tjuse titalls produkter med ulike merkevarer, uten å måtte forke eller duplicere.

3. Prestasjon ved design: ~27 KB gzip med alt inkludert. Tree-shaking bringe den reelle belastningen til ~6 KB når bare tre komponenter er nødvendige.

Enterprise-apper

• Bedrifts-UI-kit: Ett bibliotek for alle produktene til et selskap, med temaer tilpasset per produkt/merkevare.
• Delte komponenter: Samme API mellom webfrontend, Nuxt SSR og mobil-webviews.
• Designsystem som produkt: Biblioteket selv er produktet — versjonert, dokumentert, med stabile API-kontrakter under semver.

FAQ

Fungerer SolandaUI med Vue, React eller Angular?

Ja. Custom Elements er opprinnelig i nettleseren. Du kan bruke dem direkte i HTML, eller omslutte dem i Vue (<sl-button>), React (React.createElement('sl-button')), eller Angular (<sl-button> med standalone: true). Ingen obligatoriske omslag.

Hvorfor null avhengigheter?

Fordi nettleseren allerede har alt du trenger: Custom Elements, Shadow DOM, CSS Custom Properties, ES Modules. Hver ekstern avhengighet legger til bundle-byte og oppdateringssykluser. SolandaUI stoler på hva nettleseren tilbyr.

Er det tilgjengelig som standard?

Ja. Hver komponent implementerer ARIA-roller, håndterte tilstander, synlig fokus, og tastaturnavigering. Du trenger ikke manuelt legge til aria-* — komponenten håndterer det internt.

Når skulle jeg bruke SolandaUI i stedet for Material Web eller Shoelace?

SolandaUI inneholder tilpassbare temaer (6 paletter inkludert), design-token for bedriftsmerking, llms.txt for AI-assistent, og er designet som en base som hvert team tilpasser — ikke et katalog som hvert team kopierer. API-et er stabilt under semver (1.0).

Hva er lisensen?

AGPL-3.0. Koden er fri til å bruke, endre og distribuere, inkludert i kommersielle produkter. Hvis du endrer biblioteket, må endringene deles under samme lisens.

Roadmap

• Flere skjema- og datokomponenter (tabeller, velgere, diagrammer)
• Opprinnelig integrasjon med Svelte og Solid.js
• Støtte for Web Components i native miljøer (Electron, Tauri)
• Visuell temagenerátor med nettbasert editor