Urkit UI

A modern, accessible UI component library for Nuxt 4 with custom CSS architecture (no Tailwind).


✨ Features

- 🎨 Custom CSS Architecture - Beautiful components without Tailwind dependency
- 🚀 Nuxt 4 Ready - Built specifically for Nuxt 4
- ♿ Accessible - WCAG compliant components
- 🎭 Customizable - Flexible theming and icon system
- 📦 Zero Config - Works out of the box with sensible defaults
- 🔧 TypeScript - Full TypeScript support
- 🎯 Auto-Import - Components automatically available in your app

📦 Available Components

Currently available components in v0.2.0:

| Component | Description | Status |
|-----------|-------------|--------|
| UrButton | Full-featured button with variants, sizes, loading states, and icons | ✅ Stable |
| UrInput | Comprehensive input component with validation, password toggle, icons, and select | ✅ Stable |
| UrIcon | Flexible icon system with namespace support | ✅ Stable |
| UrAlert | Alert component for messages and notifications with multiple variants and statuses | ✅ Stable |
| UrBadge | Badge component for labels and status indicators with colors and variants | ✅ Stable |

$3

- ✨ UrCard - Card container component
- ✨ UrModal - Modal/dialog component
- ✨ UrToast - Toast notification system
- ✨ UrCheckbox - Checkbox input component
- ✨ UrRadio - Radio button component
- ✨ UrSelect - Dropdown select component
- ✨ UrTextarea - Multi-line text input
- And more...

🚀 Quick Start

$3

``bash


Using pnpm (recommended)

pnpm add urkit-ui

Using npm

npm install urkit-ui

Using yarn

yarn add urkit-ui
`

$3

Add urkit-ui to your nuxt.config.ts:

`typescript
export default defineNuxtConfig({
modules: ['urkit-ui']
})
`

That's it! Components are now auto-imported with the Ur prefix.

$3

`vue



`

📚 Components

$3

Full-featured button component with multiple variants, sizes, and states.

`vue
variant="primary"
mode="filled"
size="md"
icon="icons:plus"
:loading="false"
>
Click Me

`

Variants: primary, error, success, neutral
Modes: filled, stroke, lighter, ghost
Sizes: sm, md, lg, xlg

$3

Comprehensive input component with validation, icons, and advanced features.

`vue
v-model="value"
type="text"
label="Label"
placeholder="Placeholder"
icon="icons:search"
/>
`

Features:
- Text, password, email, number inputs
- Password toggle with requirements validation
- Icons and affixes (prefix/suffix)
- Button integration
- Select dropdown
- Disabled and error states

$3

Alert component for displaying important messages and notifications.

`vue
status="success"
title="Success!"
description="Your changes have been saved."
:dismissable="true"
@dismiss="handleDismiss"
/>
`

Variants: filled, light, lighter, stroke
Sizes: xsmall, small, large
Statuses: error, warning, success, information, feature

Features:
- Multiple variants and sizes
- 5 status types with unique icons
- Optional description and action buttons
- Dismissable with close button
- Slots for custom content

$3

Badge component for labels and status indicators.

`vue
variant="filled"
size="medium"
color="blue"
>
New

`

Variants: filled, light, lighter, stroke
Sizes: small, medium, large
Colors: gray, blue, orange, red, green, yellow, purple, sky, pink, teal

🎨 Icon System

Urkit includes a flexible icon system with namespace support and automatic caching.

📘 Complete Icon Documentation - Usage, custom icons, and advanced configuration

$3

The module includes essential icons to get you started:

Alert Icons (Outlined style):
- 🚨 icons:alert-error - Error alert icon
- ⚠️ icons:alert-warning - Warning alert icon
- ✅ icons:alert-success - Success alert icon
- ℹ️ icons:alert-info - Information alert icon
- ✨ icons:alert-feature - Feature announcement icon

UI Icons (Outlined style):
- ❌ icons:close - Close/dismiss icon (16×16)
- 🔍 icons:search - Search icon (24×24)
- 👁️ icons:show - Show password icon (24×24)
- 🙈 icons:hide - Hide password icon (24×24)

`vue




`

💡 All icons use currentColor for dynamic theming. See ICONS.md for complete documentation.

$3

#### Method 1: Override Built-in Icons

Place SVG files in your project's public/assets/icons/ directory:

`
your-app/
└── public/
└── assets/
└── icons/
└── custom-icon.svg ← Overrides module's icon
`

#### Method 2: Add Custom Namespace

`typescript
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['urkit-ui'],

urkit: {
iconNamespaces: {
icons: '/assets/icons', // Default
logos: '/assets/logos', // Default
custom: '/custom/icons' // Your custom namespace
}
}
})
`

Then use:

⚙️ Configuration

Customize Urkit UI in your nuxt.config.ts:

`typescript
export default defineNuxtConfig({
modules: ['urkit-ui'],

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'
}
}
})
`

🎨 Color Customization

Urkit UI uses a purple theme by default. Easily customize to match your brand:

`typescript
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['urkit-ui'],

urkit: {
colors: {
primary: {
50: '#f0f9ff',
500: '#0ea5e9', // Main brand color
600: '#0284c7', // Hover
700: '#0369a1' // Active
},
neutral: {
1: '#fafafa',
7: '#737373',
12: '#171717'
}
}
}
})
`

See COLORS.md for complete customization guide, examples, and color scales.

📖 Documentation

- Complete Usage Guide - Detailed component documentation and examples
- Icon System Guide - Icon usage, custom icons, and namespaces
- Color Customization - Brand color customization guide
- Architecture - Technical architecture and asset management

🔧 Requirements

- Nuxt 4.0.0 or later
- Node.js 18 or later

📝 License

MIT

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📬 Support

- 📦 NPM Package
- 🐛 Report Issues
- 💬 Discussions
- 📖 Documentation

---

---

👨‍💻 Development

This section is for contributors developing the Urkit UI module itself.

$3

`bash


Install dependencies

pnpm install

Prepare module

pnpm run dev:prepare

Start playground

pnpm run dev
`

$3

`bash


Build the module


pnpm run prepack
`

$3

`
urkit-ui/
├── src/
│ ├── module.ts # Module configuration
│ └── runtime/
│ ├── assets/css/ # CSS files
│ ├── components/ # Vue components
│ ├── composables/ # Composables
│ └── public/ # Public assets (icons, logos)
├── playground/ # Testing playground
├── USAGE.md # Usage documentation
└── ARCHITECTURE.md # Architecture documentation
``