---
title: Getting Started
description: "Install the theme and components, then set the scale, palette and utility classes."
---

## Installation

The theme brings the tokens, frames, textures and fonts in one CSS file. Components install one at a time and are yours to edit.

### 1. Set up shadcn/ui

Any framework works, as long as it uses Tailwind v4. Follow the [shadcn/ui installation](https://ui.shadcn.com/docs/installation).

### 2. Add the theme

```bash
npx shadcn@latest add https://osrsui.com/r/osrs-theme.json
```

Then import it after Tailwind in your global CSS:

```css
@import "tailwindcss";
@import "../styles/osrs.css";
```

### 3. Add components

```bash
npx shadcn@latest add https://osrsui.com/r/button.json
```

Each component page has its own install command. Browse them in [Components](/components).

## Theming

### Scale

`--osrs-px` is the size of one game pixel, and everything is measured in it. Keep it a whole number of CSS pixels so edges stay crisp:

```css
:root { --osrs-px: 2px; }          /* default */
.minimap-overlay { --osrs-px: 1px; } /* native size */
```

### Palette

Add the `osrs` class to a container to map the shadcn tokens (`--background`, `--primary`, …) to the OSRS palette, so stock shadcn components blend in. The raw colours are also available as `--osrs-orange`, `--osrs-yellow`, `--osrs-stone`, `--osrs-menu-target`, and so on.

### Utility classes

| Class | What it does |
| --- | --- |
| `osrs-text` | RuneScape Plain 12 with the 1px black drop shadow |
| `osrs-text-bold` / `osrs-text-small` / `osrs-text-quill` | Bold 12, Plain 11, Quill 8 |
| `osrs-texture-stone` | Tiled interface stone |
| `osrs-framed osrs-frame-<name>` | Paints any 9-slice frame, e.g. `osrs-frame-tan-border` |
| `osrs-well` | Sunken bevel |
| `osrs-notched osrs-framed` | The muted card's notched edge and lifted fill, on any element (pills, badges) |