# OSRS UI

> Pixel-exact, vector Old School RuneScape components and icons for shadcn/ui.

## Docs

- [OSRS UI](https://osrsui.com/): Old School RuneScape's interface, traced pixel for pixel into React components for shadcn/ui. Buttons, windows, the chatbox, orbs and over a thousand sprites, free to use in your app or your videos.
- [Getting Started](https://osrsui.com/getting-started): Install the theme and components, then set the scale, palette and utility classes.
- [Assets](https://osrsui.com/assets): Download every icon, frame and texture as SVG or pixel-perfect PNG at any size. Free for videos, thumbnails and overlays.

## Recipes

- [Recipes](https://osrsui.com/recipes): Whole game screens built only from the library.
- [Side Panel](https://osrsui.com/recipes/side-panel): The resizable-mode side panel with working tabs: skills, character summary, inventory, worn equipment, prayer and account management.
- [Bank](https://osrsui.com/recipes/bank): The Bank of Gielinor: draggable and resizable, with tabs, a scrolling item grid and withdraw options.
- [All Settings](https://osrsui.com/recipes/all-settings): The modern settings window: category nav, search, sections, toggles, a dropdown and a large metal button.
- [Grand Exchange](https://osrsui.com/recipes/grand-exchange): Offer slots as cards, with buy and sell buttons and flat progress bars.
- [Collection Log](https://osrsui.com/recipes/collection-log): Draggable, resizable window with large tabs, a striped selectable list and an item grid.
- [Combat Achievements](https://osrsui.com/recipes/combat-achievements): A draggable, resizable window with tier cards, filter dropdowns and a scrolling task list.
- [World Switcher](https://osrsui.com/recipes/world-switcher): A dense striped table with the green current-world highlight.
- [Skill Guide](https://osrsui.com/recipes/skill-guide): An attached category nav opening into its panel, panel tabs over scrolling text with an in-game link, and rich two-column list rows.
- [NPC Dialogue](https://osrsui.com/recipes/dialogue): The chatbox dialogue flow: NPC and player lines, then a Select an Option menu. Click to continue.
- [Chatbox](https://osrsui.com/recipes/chat): Chat messages in the parchment chatbox with the filter tabs underneath.
- [Orbs & XP drops](https://osrsui.com/recipes/orbs): Minimap orbs (including poison and venom) and XP drops.
- [Settings (classic)](https://osrsui.com/recipes/settings): A classic interface window with tabs, checkboxes, radios and sliders.

## Components

- [Components](https://osrsui.com/components): Every component, grouped by what it's for.
- [Button](https://osrsui.com/components/button): Text and icon buttons in the styles the game uses: metal and tile, each with an orange or white label.
- [Sprite Button](https://osrsui.com/components/sprite-button): A button drawn by one of the game's own button sprites, lit on hover and while the window it opens is open.
- [Split Button](https://osrsui.com/components/split-button): Two buttons in one metal frame: the main action, and a menu of related ones.
- [Toggle](https://osrsui.com/components/toggle): A single on/off tile, red while pressed, as in the bank's footer.
- [Toggle Group](https://osrsui.com/components/toggle-group): A row of tiles where the chosen one stays pressed: the bank and store quantity row.
- [Checkbox](https://osrsui.com/components/checkbox): The square settings checkbox, with the game's hover, checked and crossed sprites.
- [Radio Group](https://osrsui.com/components/radio-group): Round settings radio buttons.
- [Select](https://osrsui.com/components/select): A dropdown on Base UI Select, drawn as a sunken field with the scroll-arrow button.
- [Number Field](https://osrsui.com/components/number-field): The Grand Exchange quantity field with − and + buttons.
- [Slider](https://osrsui.com/components/slider): The settings slider.
- [Input](https://osrsui.com/components/input): A sunken text field.
- [Search Field](https://osrsui.com/components/search-field): The inset input with an orange Search… placeholder and the pixel magnifier at its end.
- [Tabs](https://osrsui.com/components/tabs): Slanted tab stones, in small, medium and large, built on Base UI Tabs.
- [Nav List](https://osrsui.com/components/nav-list): The vertical category buttons from the All Settings window.
- [Dropdown Menu](https://osrsui.com/components/dropdown-menu): A dropdown menu with shadcn/ui's API, drawn as the game's view menu: stone in the iron-rivet frame.
- [Context Menu](https://osrsui.com/components/context-menu): The right-click menu, with its "Choose Option" header and coloured targets.
- [Window](https://osrsui.com/components/window): Draggable, resizable modern interface window (All Settings, Grand Exchange, Collection Log): thick tan border, header row, close button.
- [Interface](https://osrsui.com/components/interface): The standard OSRS window - interface stone inside the iron-rivet steel frame, with a title and close button.
- [Side Panel](https://osrsui.com/components/side-panel): The resizable-mode side panel: two rows of tab stones, stone pillars and the content area.
- [Chatbox](https://osrsui.com/components/chatbox): The parchment chatbox, chat filter tabs, NPC dialogue and Select an Option.
- [Dialog](https://osrsui.com/components/dialog): A modal built on Base UI Dialog, drawn as an OSRS interface window.
- [Card](https://osrsui.com/components/card): Notched stone cards, Grand Exchange offer slots and outlined boxes.
- [Field](https://osrsui.com/components/field): Field sets and fields with shadcn/ui's Field API, drawn the way the game groups controls: the titled group box, and settings sections of striped rows.
- [Scroll Area](https://osrsui.com/components/scroll-area): The in-game scrollbar - arrow buttons, a stone track and a 3-slice thumb.
- [Separator](https://osrsui.com/components/separator): A two-tone interface rule, horizontal or vertical.
- [Popover](https://osrsui.com/components/popover): A small Interface window that drops from a button, with a settings title band over striped rows.
- [Code Block](https://osrsui.com/components/code-block): Code on a flat strip of darkened stone, with a copy button in its corner. The copy button works on its own too.
- [Steps](https://osrsui.com/components/steps): Numbered steps down a rail, each number joined to the next by a separator.
- [List](https://osrsui.com/components/list): Striped, selectable rows from the Collection Log and World Switcher, and rich rows from the Skill Guide.
- [Description List](https://osrsui.com/components/description-list): Label / value rows: orange label left, white value right (equipment bonuses, summaries).
- [Stat](https://osrsui.com/components/stat): Labelled values: the boxed currency footer of stores, and inline Label: value lines.
- [Status Icon](https://osrsui.com/components/status-icon): The game's matched round marks: a green check for done or on, a red cross for not done or off.
- [Progress](https://osrsui.com/components/progress): The textured interface bar, shaded coloured bars, and the Grand Exchange's flat bars.
- [Tooltip](https://osrsui.com/components/tooltip): The yellow examine-style tooltip.
- [Shortcut](https://osrsui.com/components/shortcut): Keyboard shortcuts as small key chips, for hints beside search fields, buttons and menu items.
- [XP Drop](https://osrsui.com/components/xp-drop): XP drops with one or more skill icons.
- [Item Slot](https://osrsui.com/components/item-slot): 36×32 item cells with in-game stack colours (yellow, white K, green M) and the 28-slot inventory.
- [Equipment Slot](https://osrsui.com/components/equipment-slot): Worn-equipment tiles with slot silhouettes and the full paper-doll grid.
- [Skill Tile](https://osrsui.com/components/skill-tile): Stats-tab tiles with current and base levels, plus the total-level tile.
- [Prayer Button](https://osrsui.com/components/prayer-button): Prayer-book toggles with the glowing active backing and locked sprites.
- [Orb](https://osrsui.com/components/orb): Minimap orbs for hitpoints, prayer, run energy and special attack, with poison and venom states.
- [Skill Icons](https://osrsui.com/components/skill-icons): All 24 skills plus total level, as React components.
- [Sprites](https://osrsui.com/components/sprites): Every sprite group as generated React components: tabs, prayers, combat styles, bank, orbs, GE, glyphs and chevrons.

## Agent skills

- [osrs-ui](https://osrsui.com/.well-known/agent-skills/osrs-ui/SKILL.md): Read the OSRS UI docs instead of answering from memory. Pixel-exact, vector Old School RuneScape components and icons for shadcn/ui. Use when a task involves OSRS UI: how it works, how to set it up or configure it, or its API.

## Agent resources

- [llms-full.txt](https://osrsui.com/llms-full.txt): The full Markdown of every page in one file.
- [Page Markdown](https://osrsui.com/index.md): Append `.md` to any page URL to fetch that page as raw Markdown.
- [JSON API](https://osrsui.com/api/docs/pages.json): Page index of the JSON docs API; each entry links the page's JSON and Markdown forms. Described by the OpenAPI document at https://osrsui.com/openapi.json.
- [Agent skills](https://osrsui.com/.well-known/agent-skills/index.json): Agent Skills discovery index of the skills this site publishes.
- [API catalog](https://osrsui.com/.well-known/api-catalog): RFC 9727 linkset of the APIs documented here.
- [AI catalog](https://osrsui.com/.well-known/ai-catalog.json): ARD manifest of the agent-facing resources on this site (MCP server, skills, APIs).
- [agent-readability.json](https://osrsui.com/agent-readability.json): Manifest of every agent-facing artifact on this site.
- [Sitemap](https://osrsui.com/sitemap.xml): Every indexable page URL with its last-modified date.