runescapecn

Build captivating user interfaces for your Old School RuneScape-themed projects with runescapecn, a library of UI components created with a distinct OSRS aesthetic. Crafted on the robust shadcn/ui framework, this open-source library preserves the essence of the RuneScape universe while offering modern, functional design elements.

Key Features

• Authentic Design: Experience OSRS-inspired components, featuring classic hard edges, beveled borders, and a zero border-radius style that mimics the game's visual identity.
• Custom Fonts: Utilize the unique RuneStar fonts, available under the public domain (CC0-1.0) license, ensuring that your UI resonates with true RuneScape fans.
• Diverse Components: Access a collection of 11 accessible UI components including Button, Card, Dialog, Select, Tabs, Input, Checkbox, Badge, Tooltip, Progress, and CopyButton, ready for integration into your projects.
• Flexible Integration: Built with React 19, TypeScript, Tailwind CSS v4, Radix UI, and Class Variance Authority, these components are designed to be easily integrated and customized.
• Copy-Paste Simplicity: Each component is provided as a single file, making them straightforward to add to your project with minimal setup.

Quick Start

Integrating UI components from the runescapecn library into your project is simple. Install the components directly using:

pnpm dlx shadcn@latest add https://runescapecn.com/r/button.json

For a complete setup, clone the repository, install dependencies, and start development:

git clone git@github.com:alns0dev/runescapecn.git
cd runescapecn
pnpm install
pnpm dev

Explore the Documentation for detailed guidelines and customization options. Join the community and contribute to the project by visiting the Issues page.

Unlock the potential of your RuneScape-themed applications with runescapecn, where passionate design meets practical usability.