Installation

Before going further, make sure you have a Nuxt 4 project set up. If not, you can follow the Nuxt installation guide.

1

Install packages

Install the required package with your favorite package manager:

npm install urkit-ui

Some components may require additional packages. You can find the required packages in the component's documentation.

2

Add to nuxt.config.ts

Add urkit to your nuxt.config.ts modules array:

export default defineNuxtConfig({
  modules: ["urkit"]
})
3

Usage

That's it! Components are now auto-imported with the Ur prefix. You can start using them in your templates:
4

Configuration

Customize Urkit in your nuxt.config.ts. You can customize the component prefix, brand colors, and icon namespaces: 

export default defineNuxtConfig({
  modules: ["urkit"],

  urkit: {
    // Customize component prefix (default: "Ur")
    prefix: "Ur",

    // Customize brand colors
    colors: {
      primary: {
        500: "#0ea5e9",  // Your brand color
        600: "#0284c7",
        700: "#0369a1"
      }
    },

    // Customize icon namespaces
    iconNamespaces: {
      icons: "/assets/icons",
      logos: "/assets/logos",
      social: "/custom/social-icons"
    }
  }
})