https://github.com/lumm-c/pixie-ui
A playful and cute React UI component library offering simple, distinctive, and user-friendly elements for your apps.
https://github.com/lumm-c/pixie-ui
react webpack
Last synced: 5 months ago
JSON representation
A playful and cute React UI component library offering simple, distinctive, and user-friendly elements for your apps.
- Host: GitHub
- URL: https://github.com/lumm-c/pixie-ui
- Owner: lumm-c
- Created: 2024-08-22T15:20:35.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-01T15:18:03.000Z (almost 2 years ago)
- Last Synced: 2025-06-07T10:46:16.345Z (about 1 year ago)
- Topics: react, webpack
- Language: JavaScript
- Homepage:
- Size: 1.05 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[中文文檔](./README.zh-CN.md)
# PIXIE-UI
**PIXIE-UI** is a React UI component library designed with a cute and playful style, aimed at providing simple, easy-to-use, and visually distinctive components for your applications. The components in this library are inspired by a cute design aesthetic, making them perfect for applications that need a soft, whimsical touch.
## Features
1. **Text**: The first component in PIXIE-UI, designed for web applications, features multiple font weights with a cute style. It also includes a simplified version of the fonts optimized for Traditional Chinese characters. The primary font sources are:
- [NaikaiFont (瀨戶字體)](https://github.com/max32002/naikaifont)
- [open-huninn font (粉圓體)](https://github.com/marsnow/open-huninn-web-font)
## Installation
PIXIE-UI is currently in development. You can clone the repository from GitHub and start testing and developing locally.
```bash
git clone https://github.com/your-username/pixie-ui.git
cd pixie-ui
npm install
git submodule update --init --recursive
npm run link-fonts
npm start
```
## How to Use
To use PIXIE-UI in your project, simply import the components you need. Here's an example of how to use the Text component with custom fonts:
```javascript
import { ThemeProvider, Text } from 'pixie-ui';
import { FontFamilies, FontWeights } from 'pixie-ui/constants';
function App() {
return (
可愛的字體效果！
);
}
```
## Roadmap
The first component in PIXIE-UI is a cute style font component. Future plans include adding more cute-themed UI components, such as:
1. Cute Text
2. Cute Buttons
3. Cute Cards
4. Cute Typography
5. Cute Input Fields