Convert Figma logo to code with AI

miukimiu logoreact-kawaii

Cute SVG React Components

2,914
104
2,914
10
View on GitHubView on NPM

Top Related Projects

catdad's avatar

canvas-confetti

10,127

🎉 performant confetti animation in the browser

alampros's avatar

react-confetti

1,477

Confetti without the cleanup.

VincentGarreau's avatar

particles.js

28,984

A lightweight JavaScript library for creating particles

Quick Overview

React Kawaii is a library of cute SVG illustrations implemented as React components. It provides a set of adorable, customizable characters that can be easily integrated into React applications to add a playful and friendly touch to user interfaces.

Pros

  • Easy to use and integrate into React projects
  • Customizable characters with props for color, size, and mood
  • Lightweight and performant SVG-based components
  • Adds a unique and charming aesthetic to applications

Cons

  • Limited number of characters available
  • May not fit all design styles or professional applications
  • Customization options are somewhat limited
  • Requires React, so not suitable for non-React projects

Code Examples

Adding a simple Kawaii character:

import { Cat } from 'react-kawaii';

function MyComponent() {
  return <Cat size={200} mood="blissful" color="#FDA7DC" />;
}

Changing the mood of a character:

import { Planet } from 'react-kawaii';
import { useState } from 'react';

function MoodChanger() {
  const [mood, setMood] = useState('happy');

  return (
    <>
      <Planet size={200} mood={mood} color="#FDA7DC" />
      <button onClick={() => setMood('sad')}>Make Sad</button>
      <button onClick={() => setMood('happy')}>Make Happy</button>
    </>
  );
}

Using multiple characters:

import { Ghost, Backpack, IceCream } from 'react-kawaii';

function KawaiiGroup() {
  return (
    <div>
      <Ghost size={100} mood="shocked" color="#E0E4E8" />
      <Backpack size={100} mood="happy" color="#FFD882" />
      <IceCream size={100} mood="blissful" color="#FDA7DC" />
    </div>
  );
}

Getting Started

  1. Install the package:

    npm install react-kawaii

  2. Import and use a Kawaii component in your React application:

    import React from 'react';
import { Browser } from 'react-kawaii';

function App() {
  return (
    <div>
      <h1>Welcome to my app!</h1>
      <Browser size={200} mood="happy" color="#61DDBC" />
    </div>
  );
}

export default App;

  3. Customize the character by adjusting the size, mood, and color props as needed.

Competitor Comparisons

catdad logo

canvas-confetti

10,127

🎉 performant confetti animation in the browser

Pros of canvas-confetti

  • Lightweight and focused on a single feature (confetti animation)
  • Can be used with any JavaScript framework or vanilla JS
  • Highly customizable with various options for confetti appearance and behavior

Cons of canvas-confetti

  • Limited to confetti animations only
  • Requires more manual setup and integration compared to React components

Code Comparison

canvas-confetti:

import confetti from 'canvas-confetti';

confetti({
  particleCount: 100,
  spread: 70,
  origin: { y: 0.6 }
});

react-kawaii:

import { Planet } from 'react-kawaii';

<Planet size={200} mood="blissful" color="#FDA7DC" />

Key Differences

  • react-kawaii focuses on cute, customizable React components
  • canvas-confetti provides a single, highly customizable confetti animation
  • react-kawaii is more suitable for adding character to React applications
  • canvas-confetti is better for adding celebratory effects to any web project

Both libraries serve different purposes and can be used together in a project if needed. react-kawaii offers a wider range of visual elements, while canvas-confetti excels at creating dynamic confetti animations.

alampros logo

react-confetti

1,477

Confetti without the cleanup.

Pros of react-confetti

  • Provides dynamic and interactive confetti animations
  • Highly customizable with various options for particle behavior
  • Lightweight and focused on a single feature

Cons of react-confetti

  • Limited to confetti animations only
  • May require more setup for complex use cases
  • Less visually diverse compared to react-kawaii's character options

Code Comparison

react-confetti:

import Confetti from 'react-confetti'

<Confetti
  width={window.width}
  height={window.height}
  numberOfPieces={200}
  recycle={false}
/>

react-kawaii:

import { Planet } from 'react-kawaii'

<Planet
  size={200}
  mood="blissful"
  color="#FDA7DC"
/>

Summary

react-confetti is ideal for projects requiring dynamic confetti animations, offering extensive customization options for particle behavior. It's lightweight but focused solely on confetti effects. On the other hand, react-kawaii provides a variety of cute character components with different moods and styles, making it more suitable for projects seeking diverse and expressive visual elements. While react-confetti excels in creating celebratory atmospheres, react-kawaii offers more versatility in adding personality to user interfaces through its range of kawaii characters.

VincentGarreau logo

particles.js

28,984

A lightweight JavaScript library for creating particles

Pros of particles.js

  • More versatile and customizable for creating particle animations
  • Lightweight and easy to integrate into various projects
  • Supports multiple rendering modes (canvas, WebGL)

Cons of particles.js

  • Not specifically designed for React applications
  • Requires more setup and configuration for complex animations
  • Less focused on creating cute, character-based designs

Code Comparison

particles.js:

particlesJS("particles-js", {
  particles: {
    number: { value: 80, density: { enable: true, value_area: 800 } },
    color: { value: "#ffffff" },
    shape: { type: "circle" },
    // ... more configuration options
  }
});

react-kawaii:

import { Planet } from 'react-kawaii';

const MyComponent = () => (
  <Planet size={200} mood="blissful" color="#FDA7DC" />
);

The code comparison shows that particles.js requires more configuration to set up a particle system, while react-kawaii offers pre-designed, customizable kawaii components with simpler implementation. particles.js is more flexible for creating various particle effects, whereas react-kawaii focuses on providing cute, character-based elements for React applications.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

React Kawaii

Version npm

Welcome to React Kawaii! This repository contains both the website and the React package.

React Kawaii is an open source library of cute SVG illustrations. Perfect if you want to give some cuteness to your React App.

React Kawaii Logo

Website

The website for React Kawaii is located in the apps/website directory. It serves as a documentation hub and may also include demos, tutorials, and other resources related to the project.

To start the website locally:

  1. Navigate to the apps/website directory.
  2. Install dependencies with pnpm install.
  3. Run the development server with pnpm start.

React Package

The React package, named react-kawaii, is located in the packages/react-kawaii directory. It contains the source code for the React components.

To use the react-kawaii package in your projects:

  1. Install it from npm or yarn:

    npm install --save react-kawaii

    or

    yarn add react-kawaii

  2. Import the components you need in your React application:

    import { Planet } from 'react-kawaii';

const MyComponent = () => {
  return <Planet size={200} mood="blissful" color="#FDA7DC" />;
}

Example

React Kawaii Example

For detailed documentation and usage examples, visit the React Kawaii documentation website.

Contributing

Contributions to React Kawaii are welcome! Feel free to open issues or pull requests if you have any suggestions, bug fixes, or improvements.

License

This project is licensed under the MIT License.

NPM DownloadsLast 30 Days