English | 简体中文

This project is a lightweight UI component library built with React + TypeScript. It features an original, cozy island-style design language, created for personal front-end technical practice and component development learning.All visual elements, layouts, icons, and animations are independently designed and implemented from scratch.

• Online Preview (PC) animal-island-ui-pc
• Online Preview (Mobile) animal-island-ui-mobile

Need icons? The recommended set is naive-icons: https://github.com/guokaigdg/naive-icons

Using an AI coding agent (Claude Code / Codex / Cursor)? Install the animal-island-ui-style skill:

skills add guokaigdg/animal-island-ui

Non-developer and don't want to write code yourself? Use the one-click prompt — no npm, no build step.

4 steps:

1. Copy the prompt block from docs/one-click-prompt.md.
2. Paste into any AI tool that can fetch URLs (Cursor / Claude / ChatGPT / Gemini / v0 / Bolt) and send.
3. The AI asks what page you want — reply in one phrase (e.g. "personal blog", "product list", "FAQ").
4. Save the index.html it returns and double-click to preview.

npm install animal-island-ui

⚠️ Important: Please make sure to import the styles with import 'animal-island-ui/style', otherwise the components will have no styles or fonts!

import { Button, Card } from 'animal-island-ui';
import 'animal-island-ui/style';

function App() {
    return (
        <div>
            <Button type="primary">Start Adventure</Button>
            <Card color="app-blue">Welcome to the island!</Card>
        </div>
    );
}

Routed by audience and scenario (English primary; Chinese mirrors under docs/zh-CN/):

# Clone the repository
git clone https://github.com/guokaigdg/animal-island-ui.git
cd animal-island-ui

# Install dependencies
npm install

# Start Demo development server
npm run dev

# Build component library
npm run build

# Build Demo site
npm run build:demo

• This project is intended for personal learning, research, and non-commercial demonstration only. Any form of commercial use, resale, or profit-making activities is prohibited.
• Not to be used in any commercial product, enterprise project, external service, or paid template.
• Users are solely responsible for any risks arising from the use of this component library.

• This is an independently created open-source project. It is not an official product of any game company and has no association, authorization, or cooperation with any company or its products.
• All visual assets (icons, illustrations, animations) in this repository are original works created for this project.
• If the copyright holder believes that related content is suspected of infringement, they can contact via email, and I will make rectifications or deletions immediately.

For any questions or copyright-related communications, please contact via Issue or email.

If this project has been helpful to you, consider buying the developer's cat a can of tuna — meowsters are the real fuel that keeps the island running.

Sponsor this Island

Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) — see the LICENSE file for the full text.

• Commercial use: PROHIBITED.
• Permitted (non-commercial): personal learning, research, evaluation, testing, and non-commercial display.
• Attribution required: must retain the original copyright notice and license declaration.
• The author is not responsible for any legal issues or losses caused by the use of this library.