ParaOre-UI

A Sass/CSS component library based on the Mojang OreUI design language

一款基于 Mojang OreUI 设计语言的 Sass/CSS 组件库

---

Caution

法律风险提示：Mojang 开源了 OreUI 的状态管理代码，但 OreUI 样式本身的版权状态尚不明确。此组件库可能存在版权法律问题，请谨慎使用！

---

Quick Start

Installation

npm install @ningze/paraore-ui

Usage

CSS

<link rel="stylesheet" href="node_modules/@ningze/paraore-ui/dist/paraore-ui.css">

Sass

@use '@ningze/paraore-ui';

TypeScript/JavaScript

<script type="module">
  import { showModal, hideModal, scrollToTop, openLink } from '@ningze/paraore-ui/dist/js/paraore-ui.js';
</script>

TypeScript (with type support)

import { showModal, CustomButton, DisplaySidebar } from '@ningze/paraore-ui';

// 完整的 TypeScript 类型提示支持
showModal('modal-id');

Build

npm run build        # Build CSS + JS + Types (production)
npm run build:css    # Build CSS only (compressed)
npm run build:js     # Build JS only (bundled)
npm run build:types  # Build TypeScript declarations
npm run build:dev    # Build CSS + JS (development with source maps)
npm run dev-css      # Build CSS with source maps
npm run dev-js       # Build JS with source maps
npm run watch        # Watch mode for Sass
npm run lint         # ESLint check

---

Components

CSS Components

Component	Description
Buttons	.btn, .normal_btn, .green_btn, .red_btn, .auto_width_btn
Checkbox	.custom-checkbox (pure CSS with CSS checkmark)
Radio	.custom-radio (pure CSS)
Dropdown	<custom-dropdown>
Scrollbar	<custom-scrollbar>
Sidebar	<display-sidebar>, .sidebar_btn, .sidebar_nav
Banner	.banner
Badge	.badge
Divider	<divider>, <line>
Article	<article_block>
Header	<header>
Loading	.loading_mask
Slider	.slider
Switch	.switch
Tag	.tag
Text Field	.input, text-field
Modal	modal, modal_area

JavaScript/TypeScript Components

Component	Description
CustomButton	<custom-button> Web Component
CustomCheckbox	<custom-checkbox> Web Component
CustomRadio	<custom-radio> Web Component
CustomDropdown	<custom-dropdown> Web Component
CustomSlider	<custom-slider> Web Component
CustomSwitch	<custom-switch> Web Component
CustomScrollbar	<custom-scrollbar> Web Component
TextField	<text-field> Web Component
DisplaySidebar	<display-sidebar> Web Component
Modal	showModal(), hideModal() functions
Scroll	Custom scrollbar logic, scrollToTop(), toTop()
Utils	ifNavigating(), openLink(), launchApplication()

---

Directory Structure

ParaOre-UI/
├── sass/
│   ├── base/              # Variables, mixins, reset
│   ├── components/        # Button, checkbox, sidebar, modal, etc.
│   ├── layout/            # Header, main layout
│   ├── utilities/         # Helpers
│   └── paraore-ui.scss    # Main entry
├── typescript/
│   ├── components/        # Web Components
│   ├── types.ts
│   ├── global.d.ts
│   ├── public_script.ts   # Utility functions
│   ├── load.ts
│   └── index.ts           # Main entry
├── dist/                  # Built files
│   ├── js/                # Bundled JavaScript
│   ├── types/             # TypeScript declarations (.d.ts)
│   ├── paraore-ui.css     # Compiled CSS
│   └── fonts/, images/    # Assets
├── fonts/                 # Custom fonts
├── images/                # Image assets
├── example/               # Demo pages
├── USAGE.md               # Usage guide
├── package.json
├── tsconfig.json
├── eslint.config.js
└── README.md

---

License

MIT License

---

Links

• 参考项目：https://github.com/Spectrollay/OreUI
• npm: https://www.npmjs.com/package/@ningze/paraore-ui
• Author: JanePHPDev (@JanePHPDev) - NingZeStudio