Repolode
Submit
guokaigdg

guokaigdg/animal-island-ui

A cozy, island-style React and TypeScript UI component library with original icons, illustrations and animations.

View on GitHubWebsite
Stars
5,027
Forks
31
Open issues
3
Last commit
yesterday

What is it?

Animal-Island-UI is a lightweight React and TypeScript component library with a playful, cozy visual language. Buttons, cards and other components share one design system, and the icons, layouts and animations were created for the project rather than taken from existing kits.

You install it from npm, import the stylesheet once with `import 'animal-island-ui/style'`, and then use components such as Button and Card in your app. The repository includes a demo site, a design-system specification with per-component specs, and an installable agent skill that helps AI coding tools generate pages in this style. A Vue port, animal-island-vue, is maintained separately.

The project is MIT licensed and was built independently, without any association with a game company.

Key features

  • 01Ships React components written in TypeScript.
  • 02Provides a single stylesheet import that includes component styles and fonts.
  • 03Includes original icons, illustrations and animations in a consistent island-style look.
  • 04Offers an online demo site and a documented design-system specification.
  • 05Includes an installable skill for AI coding agents to generate pages in this style.

Use cases

  • Building a playful consumer app, game-like dashboard or personal site that needs a cute visual style.
  • Prototyping a landing page or product list quickly with pre-styled components.
  • Generating a standalone HTML page in this style with an AI tool, without writing code.

Quick start

  1. 1

    Install the package

    npm install animal-island-ui
  2. 2

    Import the styles (required for components to render correctly)

    import 'animal-island-ui/style';
  3. 3

    Use the components in your app

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

Things to know

  • Components will have no styles or fonts unless 'animal-island-ui/style' is imported.

Topics

#react#typescript#component-library#ui-components#design-system#ui-design

FAQ

What is animal-island-ui?
A cozy, island-style React and TypeScript UI component library with original icons, illustrations and animations. Animal-Island-UI is a lightweight React and TypeScript component library with a playful, cozy visual language. Buttons, cards and other components share one design system, and the icons, layouts and animations were created for the project rather than taken from existing kits.
Is animal-island-ui free to use? What license does it have?
animal-island-ui is open source under the MIT license. Check the license terms before using it in commercial products.
Is animal-island-ui still maintained?
Actively maintained. The last commit to animal-island-ui was on Oct 19, 2026.
What can I use animal-island-ui for?
Building a playful consumer app, game-like dashboard or personal site that needs a cute visual style. Prototyping a landing page or product list quickly with pre-styled components. Generating a standalone HTML page in this style with an AI tool, without writing code.
How do I install animal-island-ui?
Install the package: npm install animal-island-ui Import the styles (required for components to render correctly): import 'animal-island-ui/style'; Use the components in your app: import { Button, Card } from 'animal-island-ui';
Where can I get animal-island-ui?
The source code and installation instructions are on GitHub: https://github.com/guokaigdg/animal-island-ui

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects