Skip to content
Selaras

Antarmuka, selaras.

Komponen Vue untuk Nuxt dan Tailwind CSS v4. Empat penyesuaian kecil untuk satu antarmuka: terapkan satu per satu dan lihat semuanya terasa milik Anda.

Mulai

  1. Tentukan satu warna untuk peran utama. Nilai hover, ditekan, teks, dan fokus diturunkan darinya untuk mode terang maupun gelap.

    nuxt.config.ts
    import { defineColorFromSeed } from '@sewadah/selaras/theme'

export default defineNuxtConfig({
  selaras: {
    theme: {
      colors: { primary: defineColorFromSeed('#0F766E') },
    },
  },
})

  2. Satu token radius. Radius kecil, sedang, dan besar diturunkan dari nilai ini.

    main.css
    :root {
  --selaras-radius-base: 0px;
}

  3. Tambahkan kelas ke setiap kemunculan komponen tanpa perlu membungkusnya.

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

  4. Prop :ui mengubah satu instans dan menjadi prioritas di atas semua pengaturan sebelumnya.

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

Jelajahi pustaka

  • Komponen

    Input, navigasi, overlay, dan detail di antaranya, dengan dukungan keyboard dan API bertipe.

  • Komposit

    Dasbor yang dapat diubah ukurannya dan tata letak dokumentasi, disusun dari bagian yang sama.

  • Blok

    Antarmuka lengkap untuk dicoba, diperiksa, dan disalin ke proyek Anda.

  • Utilitas

    Buka overlay dari kode, gunakan ikon dan pesan bersama, serta tambahkan mask input.

Membangun dengan coding agent? Berikan API komponen, contoh, dan skill Selaras.

Selaras 1.2.0, MIT licensed.