Skip to content
Iryx UI

Guide

Installation ​

$ pnpm add iryx-ui

Tailwind CSS v4 is required. Importing theme.css alongside it brings in the tokens and points Tailwind's scanner at the package.

Vue 3 with Vite ​

ts
// main.ts
import { IryxUi } from 'iryx-ui'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(IryxUi).mount('#app')
css
/* main.css */
@import "tailwindcss";
@import "iryx-ui/theme.css";

The plugin registers every component globally under the I prefix. Pass options to change it:

ts
import { createIryxUi } from 'iryx-ui'

app.use(createIryxUi({ prefix: 'Ui', appearance: 'system', theme: 'violet' }))

If you prefer local imports, import components directly instead. The build is per-module, so only what you import is bundled:

vue
<script setup lang="ts">
import { Button, Switch } from 'iryx-ui'
</script>

Nuxt ​

ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['iryx-ui/nuxt'],
})
css
/* assets/css/main.css */
@import "tailwindcss";
@import "iryx-ui/theme.css";

Components are auto-imported with the I prefix. Configure the module under the iryxUi key:

ts
export default defineNuxtConfig({
  modules: ['iryx-ui/nuxt'],
  iryxUi: {
    prefix: 'I',
    unstyled: false,
    appearance: 'system',
    theme: 'violet',
  },
})

First component ​

Typeface ​

Typography follows the --iryx-font-sans token, which defaults to the system stack. Load any family you like and point the token at it:

css
:root {
  --iryx-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

Next: theming.