Interfaces, in harmony.

Vue components for Nuxt and Tailwind CSS v4. Four small edits, one interface: apply them in turn and watch it become yours.

1. 1 Your brand colour

   Give the primary role one colour. Hover, pressed, text and focus values are derived from it, in light and dark.

   import { defineColorFromSeed } from '@sewadah/selaras/theme'
   
   export default defineNuxtConfig({
     selaras: {
       theme: {
         colors: { primary: defineColorFromSeed('#0F766E') },
       },
     },
   })

2. 2 Your corners

   One radius token. The small, medium and large radii are derived from it.

   :root {
     --selaras-radius-base: 0px;
   }

3. 3 Every button

   Add classes to a component everywhere it appears, without wrapping it.

   export default defineAppConfig({
     selaras: {
       ui: {
         button: { slots: { base: 'uppercase tracking-wider' } },
       },
     },
   })

4. 4 Just this one

   The :ui prop changes a single instance, and wins over everything above.

   <SButton :ui="{ base: 'rounded-full' }">
     Request booking
   </SButton>