Skip to main content
Urbicon UI

Getting started — install · setup · first component

Getting started

Get up and running with Urbicon UI in minutes. This guide covers installation, basic setup, and creating your first components.

Prerequisites

Requirements

  • Svelte 5.0+ with runes support
  • Tailwind CSS 4.0+ for styling
  • TypeScript (recommended)
  • Node.js 18+ or Bun 1.0+

Installation

Install Urbicon UI

Loading syntax highlighting...

Package managers

Works with npm, yarn, pnpm and bun.

Tree shaking

Only import what you use — nothing else ships.

Basic setup

1. Import design tokens

Import CSS Tokens

Loading syntax highlighting...

2. Configure Tailwind (if not already set up)

Vite Config

Loading syntax highlighting...

Your first component

Hello world

Loading syntax highlighting...

Theme customization

Urbicon UI uses Tailwind 4's @theme directive for customization. Override design tokens to match your brand — every component follows them automatically.

Custom Theme

Loading syntax highlighting...

Next steps

Explore components

Browse all available components with live examples and detailed API documentation.

View components

Design tokens

Learn about the comprehensive design token system for colors, typography and spacing.

View tokens

Need help?

Browse the source and report issues on Codeberg, or point your AI tooling at the llms.txt reference and MCP server.

Codeberg AI Tooling

Performance tips

Import only what you need

import { Button, Input } from '@urbicon-ui/blocks' instead of importing everything.

Use design tokens

Leverage CSS custom properties for consistent theming and better performance.

Progressive enhancement

Start with simple components and add complexity only when needed.