├── apps └── website │ ├── .nvmrc │ ├── .npmrc │ ├── .eslintignore │ ├── images.d.ts │ ├── src │ ├── app │ │ ├── not-found.tsx │ │ ├── favicon.ico │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── apple-touch-icon.png │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── page.tsx │ │ └── layout.tsx │ ├── components │ │ ├── hero │ │ │ ├── hero.css │ │ │ └── Hero.tsx │ │ ├── kawaiiList │ │ │ ├── kawaiiListDialog.css │ │ │ ├── kawaiiListToolbar.css │ │ │ ├── kawaiiListGrid.css │ │ │ ├── KawaiiList.tsx │ │ │ ├── KawaiiListGrid.tsx │ │ │ ├── KawaiiListDialog.tsx │ │ │ └── KawaiiListToolbar.tsx │ │ ├── header │ │ │ ├── header.css │ │ │ └── Header.tsx │ │ ├── button │ │ │ ├── buttonGitHubStars.css │ │ │ ├── buttonThemeToggle.css │ │ │ ├── ButtonThemeToggle.tsx │ │ │ └── ButtonGithubStars.tsx │ │ ├── codeBlock │ │ │ ├── codeBlock.css │ │ │ └── CodeBlock.tsx │ │ └── footer │ │ │ ├── footer.css │ │ │ └── Footer.tsx │ ├── utils │ │ └── capitalizeFirstLetter.ts │ ├── constants │ │ └── index.ts │ ├── mdx-components.tsx │ └── global.css │ ├── .prettierignore │ ├── public │ ├── images │ │ └── react-kawaii-open-graph.png │ └── logo.svg │ ├── .eslintrc.js │ ├── next-env.d.ts │ ├── turbo.json │ ├── tsconfig.json │ ├── next.config.js │ ├── .gitignore │ ├── CHANGELOG.md │ ├── LICENSE.md │ └── package.json ├── .vscode ├── extensions.json └── settings.json ├── pnpm-workspace.yaml ├── images ├── react-kawaii-example.gif └── react-kawaii-logo@2x.png ├── .prettierignore ├── packages └── react-kawaii │ ├── .eslintrc.js │ ├── src │ ├── utils │ │ └── getFaceScale.ts │ ├── types │ │ └── index.ts │ ├── constants │ │ └── index.ts │ ├── index.ts │ └── components │ │ ├── Planet.tsx │ │ ├── CreditCard.tsx │ │ ├── IceCream.tsx │ │ ├── SpeechBubble.tsx │ │ ├── Mug.tsx │ │ ├── File.tsx │ │ ├── Folder.tsx │ │ ├── Ghost.tsx │ │ ├── Chocolate.tsx │ │ ├── Browser.tsx │ │ ├── common │ │ ├── Face.tsx │ │ └── paths.ts │ │ ├── HumanDinosaur.tsx │ │ ├── Backpack.tsx │ │ ├── HumanCat.tsx │ │ ├── Cat.tsx │ │ ├── Cyborg.tsx │ │ └── Astronaut.tsx │ ├── .gitignore │ ├── tsconfig.json │ ├── package.json │ ├── dist │ ├── index.d.mts │ └── index.d.ts │ ├── CHANGELOG.md │ ├── README.md │ └── scripts │ └── generate.ts ├── .gitignore ├── configs ├── tsconfig │ ├── package.json │ ├── README.md │ ├── nextjs.json │ └── base.json └── eslint-config-react-kawaii │ ├── README.md │ ├── package.json │ └── nextjs.js ├── .prettierrc.js ├── .changeset ├── config.json └── README.md ├── turbo.json ├── .github └── FUNDING.yml ├── LICENSE.md ├── scripts └── checkSubprojects.ts ├── package.json └── README.md /apps/website/.nvmrc: -------------------------------------------------------------------------------- 1 | 18 2 | -------------------------------------------------------------------------------- /apps/website/.npmrc: -------------------------------------------------------------------------------- 1 | enable-pre-post-scripts=true 2 | -------------------------------------------------------------------------------- /apps/website/.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .eslintrc.js 3 | next.config.js 4 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["dbaeumer.vscode-eslint"] 3 | } 4 | -------------------------------------------------------------------------------- /apps/website/images.d.ts: -------------------------------------------------------------------------------- 1 | // images.d.ts 2 | /// 3 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'apps/*' 3 | - 'configs/*' 4 | - 'packages/*' 5 | -------------------------------------------------------------------------------- /apps/website/src/app/not-found.tsx: -------------------------------------------------------------------------------- 1 | export default async function NotFound() { 2 | return

Not found

; 3 | } 4 | -------------------------------------------------------------------------------- /apps/website/.prettierignore: -------------------------------------------------------------------------------- 1 | **/.git 2 | **/.svn 3 | **/.hg 4 | **/node_modules 5 | **/.contentlayer 6 | **/.content 7 | -------------------------------------------------------------------------------- /images/react-kawaii-example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elizabetdev/react-kawaii/HEAD/images/react-kawaii-example.gif -------------------------------------------------------------------------------- /images/react-kawaii-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elizabetdev/react-kawaii/HEAD/images/react-kawaii-logo@2x.png -------------------------------------------------------------------------------- /apps/website/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elizabetdev/react-kawaii/HEAD/apps/website/src/app/favicon.ico -------------------------------------------------------------------------------- /apps/website/src/app/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elizabetdev/react-kawaii/HEAD/apps/website/src/app/favicon-16x16.png -------------------------------------------------------------------------------- /apps/website/src/app/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elizabetdev/react-kawaii/HEAD/apps/website/src/app/favicon-32x32.png -------------------------------------------------------------------------------- /apps/website/src/app/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elizabetdev/react-kawaii/HEAD/apps/website/src/app/apple-touch-icon.png -------------------------------------------------------------------------------- /apps/website/src/app/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elizabetdev/react-kawaii/HEAD/apps/website/src/app/android-chrome-192x192.png -------------------------------------------------------------------------------- /apps/website/src/app/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elizabetdev/react-kawaii/HEAD/apps/website/src/app/android-chrome-512x512.png -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .eslintcache 3 | .next/ 4 | public/ 5 | **/.contentlayer 6 | **/.content 7 | 8 | # turbo 9 | .turbo 10 | .vercel 11 | -------------------------------------------------------------------------------- /apps/website/src/components/hero/hero.css: -------------------------------------------------------------------------------- 1 | .hero h1 { 2 | font-family: var(--font-baloo); 3 | } 4 | 5 | .hero__getStartedBtn { 6 | cursor: pointer; 7 | } 8 | -------------------------------------------------------------------------------- /packages/react-kawaii/.eslintrc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @type {import("eslint").Linter.Config} 3 | */ 4 | module.exports = { 5 | extends: 'react-kawaii/nextjs' 6 | }; 7 | -------------------------------------------------------------------------------- /apps/website/public/images/react-kawaii-open-graph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elizabetdev/react-kawaii/HEAD/apps/website/public/images/react-kawaii-open-graph.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .eslintcache 3 | .next/ 4 | tsconfig.tsbuildinfo 5 | *.code-workspace 6 | 7 | # turbo 8 | .turbo 9 | .vercel 10 | 11 | **/.DS_Store -------------------------------------------------------------------------------- /apps/website/src/components/kawaiiList/kawaiiListDialog.css: -------------------------------------------------------------------------------- 1 | .kawaiiListDialog__code { 2 | background: var(--color-illustration-bg); 3 | border-radius: var(--radius-5); 4 | } 5 | -------------------------------------------------------------------------------- /apps/website/src/utils/capitalizeFirstLetter.ts: -------------------------------------------------------------------------------- 1 | export const capitalizeFirstLetter = (string: string) => { 2 | return string.charAt(0).toUpperCase() + string.slice(1); 3 | }; 4 | -------------------------------------------------------------------------------- /configs/tsconfig/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tsconfig", 3 | "version": "0.0.0", 4 | "private": true, 5 | "devDependencies": { 6 | "typescript": "^5.4.5" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /configs/tsconfig/README.md: -------------------------------------------------------------------------------- 1 | # Shared tsconfig 2 | 3 | ## Usage 4 | 5 | In your `tsconfig.json`: 6 | 7 | ```json 8 | { 9 | "extends": "tsconfig/base.json" // or "tsconfig/nextjs.json" 10 | } 11 | ``` 12 | -------------------------------------------------------------------------------- /configs/eslint-config-react-kawaii/README.md: -------------------------------------------------------------------------------- 1 | # Shared ESLint configuration 2 | 3 | ## Usage 4 | 5 | In your `.eslintrc.js`: 6 | 7 | ```js 8 | module.exports = { 9 | extends: 'react-kawaii/nextjs' 10 | }; 11 | ``` 12 | -------------------------------------------------------------------------------- /apps/website/.eslintrc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @type {import("eslint").Linter.Config} 3 | */ 4 | module.exports = { 5 | extends: 'react-kawaii/nextjs', 6 | linterOptions: { 7 | exclude: ['src/app/mdx-components.tsx'] 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /apps/website/src/components/header/header.css: -------------------------------------------------------------------------------- 1 | .header__logo { 2 | display: flex; 3 | align-items: center; 4 | gap: var(--space-1); 5 | text-decoration: none; 6 | } 7 | 8 | .header__link { 9 | text-decoration: none; 10 | } 11 | -------------------------------------------------------------------------------- /apps/website/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. 6 | -------------------------------------------------------------------------------- /apps/website/turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["//"], 3 | "tasks": { 4 | "build": { 5 | "dependsOn": ["^build"], 6 | "inputs": ["./**", "!.next/**", "!.turbo/**"], 7 | "outputs": [".next/**", "!.next/cache/**", "public/mdx/**"] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /apps/website/src/components/button/buttonGitHubStars.css: -------------------------------------------------------------------------------- 1 | .buttonGitHubStars { 2 | display: flex; 3 | gap: var(--space-2); 4 | align-items: center; 5 | } 6 | 7 | .buttonGitHubStars:hover { 8 | transform: scale(1.02); 9 | transition: transform 0.2s ease-in-out; 10 | } 11 | -------------------------------------------------------------------------------- /packages/react-kawaii/src/utils/getFaceScale.ts: -------------------------------------------------------------------------------- 1 | // Return the ratio of the components face's width in the Figma component SVG 2 | // The original face's width in the moods Figma frame corresponds to 66px 3 | export const getFaceScale = (size: number) => { 4 | return size / 66; 5 | }; 6 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tabWidth: 2, 3 | singleQuote: true, 4 | semi: true, 5 | trailingComma: 'none', 6 | printWidth: 120, 7 | endOfLine: 'auto', 8 | plugins: ['prettier-plugin-organize-imports'], 9 | organizeImportsSkipDestructiveCodeActions: true 10 | }; 11 | -------------------------------------------------------------------------------- /apps/website/src/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const COLORS = [ 2 | '#A6E191', // green 3 | '#FFB3BA', // pastel red 4 | '#FCCB7E', // yellow 5 | '#ADD2FF', // blue 6 | '#D7BAFF', // pastel purple 7 | '#FFBAE1' // pastel magenta, 8 | ]; 9 | 10 | export const SPACES = { 11 | marginY: 40, 12 | gutterX: 20 13 | }; 14 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "restricted", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": [] 11 | } 12 | -------------------------------------------------------------------------------- /apps/website/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "extends": "tsconfig/nextjs.json", 4 | "compilerOptions": { 5 | "paths": { 6 | "~/*": ["./src/*"] 7 | } 8 | }, 9 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "images.d.ts"], 10 | "exclude": ["node_modules"] 11 | } 12 | -------------------------------------------------------------------------------- /apps/website/src/components/button/buttonThemeToggle.css: -------------------------------------------------------------------------------- 1 | .buttonThemeToggle { 2 | cursor: pointer !important; 3 | } 4 | 5 | .buttonThemeToggle__loading { 6 | animation: spin 1s linear infinite; 7 | opacity: 0.4; 8 | } 9 | 10 | @keyframes spin { 11 | 0% { 12 | transform: rotate(0deg); 13 | } 14 | 100% { 15 | transform: rotate(360deg); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /configs/tsconfig/nextjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Next.js", 4 | "extends": "./base.json", 5 | "compilerOptions": { 6 | "resolveJsonModule": true, 7 | "jsx": "preserve", 8 | "incremental": true, 9 | "plugins": [{ "name": "next" }] 10 | }, 11 | "include": ["src", "next-env.d.ts"], 12 | "exclude": ["node_modules"] 13 | } 14 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.tabSize": 2, 3 | "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], 4 | "editor.codeActionsOnSave": { 5 | "source.fixAll.eslint": "explicit" 6 | }, 7 | "typescript.tsdk": "node_modules/typescript/lib", 8 | "eslint.workingDirectories": [ 9 | { 10 | "pattern": "./packages/*" 11 | }, 12 | { 13 | "pattern": "./apps/*" 14 | } 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-kawaii/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | 9 | # misc 10 | .DS_Store 11 | *.pem 12 | 13 | # debug 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | 18 | # vercel 19 | .vercel 20 | 21 | .eslintcache 22 | *.tsbuildinfo 23 | 24 | # idea IDE 25 | /.idea 26 | /.iml 27 | .iml 28 | *.iml 29 | -------------------------------------------------------------------------------- /packages/react-kawaii/src/types/index.ts: -------------------------------------------------------------------------------- 1 | import { SVGProps } from 'react'; 2 | import { MOODS } from '../constants'; 3 | 4 | export type KawaiiMood = (typeof MOODS)[number]; 5 | 6 | export type KawaiiProps = SVGProps & { 7 | size?: number | string; 8 | color?: string; 9 | mood?: KawaiiMood; 10 | uniqueId?: string; 11 | }; 12 | 13 | export type KawaiiFaceProps = { 14 | mood?: KawaiiMood; 15 | uniqueId?: string; 16 | transform?: string; 17 | }; 18 | -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turbo.build/schema.json", 3 | "globalDependencies": ["**/.env.*local"], 4 | "tasks": { 5 | "build": { 6 | "dependsOn": ["^build"], 7 | "outputs": ["dist/**", ".next/**", "!.next/cache/**"] 8 | }, 9 | "start": {}, 10 | "lint": {}, 11 | "tsc": { 12 | "dependsOn": ["^tsc"], 13 | "outputs": [] 14 | }, 15 | "test": {}, 16 | "dev": { 17 | "cache": false, 18 | "persistent": true 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /packages/react-kawaii/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "declaration": true, 5 | "noImplicitAny": true, 6 | "module": "ESNext", 7 | "target": "ESNext", 8 | "lib": ["dom", "dom.iterable", "esnext"], 9 | "jsx": "react-jsx", 10 | "allowJs": true, 11 | "moduleResolution": "node", 12 | "allowSyntheticDefaultImports": true, 13 | "esModuleInterop": true, 14 | "skipLibCheck": true, 15 | "forceConsistentCasingInFileNames": true 16 | }, 17 | "include": ["./**/*.ts", "./**/*.tsx"] 18 | } 19 | -------------------------------------------------------------------------------- /apps/website/src/components/kawaiiList/kawaiiListToolbar.css: -------------------------------------------------------------------------------- 1 | .kawaiiListToolbar { 2 | z-index: 999; 3 | } 4 | 5 | .kawaiiListToolbar__card { 6 | padding: var(--space-4); 7 | display: flex; 8 | overflow: hidden; 9 | gap: var(--space-4); 10 | width: 100%; 11 | } 12 | 13 | .kawaiiListToolbar__colorPopover .w-color-circle { 14 | display: flex !important; 15 | gap: var(--space-2); 16 | } 17 | 18 | .kawaiiListToolbar__colorPopover .w-color-circle-point { 19 | width: var(--space-5) !important; 20 | height: var(--space-5) !important; 21 | border-radius: 50% !important; 22 | } 23 | -------------------------------------------------------------------------------- /configs/eslint-config-react-kawaii/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eslint-config-react-kawaii", 3 | "version": "0.0.0", 4 | "private": true, 5 | "devDependencies": { 6 | "@typescript-eslint/eslint-plugin": "^7.8.0", 7 | "@typescript-eslint/parser": "^7.8.0", 8 | "eslint": "=8.57.0", 9 | "eslint-config-next": "^14.2.3", 10 | "eslint-config-prettier": "^9.1.0", 11 | "eslint-plugin-check-file": "^2.8.0", 12 | "eslint-plugin-import": "^2.29.1", 13 | "eslint-plugin-jsx-a11y": "^6.8.0", 14 | "eslint-plugin-react": "^7.34.1", 15 | "typescript": "^5.4.5" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /apps/website/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next'; 2 | import { Hero } from '~/components/hero/Hero'; 3 | import { KawaiiList } from '~/components/kawaiiList/KawaiiList'; 4 | 5 | export const metadata: Metadata = { 6 | title: 'React Kawaii - Cute illustrations for React Apps', 7 | description: 8 | 'React Kawaii is an open source library of cute SVG illustrations. Perfect if you want to give some cuteness to your React App.' 9 | }; 10 | 11 | const Home = () => { 12 | return ( 13 | <> 14 | 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Home; 21 | -------------------------------------------------------------------------------- /configs/tsconfig/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Default", 4 | "compilerOptions": { 5 | "target": "ES6", 6 | "lib": ["dom", "dom.iterable", "esnext"], 7 | "allowJs": true, 8 | "noEmit": true, 9 | "module": "esnext", 10 | "esModuleInterop": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "inlineSources": false, 13 | "isolatedModules": true, 14 | "moduleResolution": "Bundler", 15 | "preserveWatchOutput": true, 16 | "skipLibCheck": true, 17 | "strict": true, 18 | "strictNullChecks": true 19 | }, 20 | "exclude": ["node_modules"] 21 | } 22 | -------------------------------------------------------------------------------- /apps/website/next.config.js: -------------------------------------------------------------------------------- 1 | const withMDX = require('@next/mdx')(); 2 | 3 | /** @type {import('next').NextConfig} */ 4 | const nextConfig = { 5 | // Configure pageExtensions to include md and mdx 6 | pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], 7 | // Optionally, add any other Next.js config below 8 | reactStrictMode: true, 9 | images: { 10 | domains: [], 11 | dangerouslyAllowSVG: true 12 | }, 13 | 14 | webpack: (config) => { 15 | config.externals = [ 16 | ...config.externals, 17 | 18 | { 19 | 'utf-8-validate': 'commonjs utf-8-validate', 20 | bufferutil: 'commonjs bufferutil' 21 | }, 22 | 'canvas' 23 | ]; 24 | return config; 25 | } 26 | }; 27 | 28 | module.exports = withMDX(nextConfig); 29 | -------------------------------------------------------------------------------- /apps/website/src/components/kawaiiList/kawaiiListGrid.css: -------------------------------------------------------------------------------- 1 | .kawaiiListGrid { 2 | flex: 1; 3 | } 4 | 5 | .kawaiiListGridCard { 6 | position: relative; 7 | transition: transform 0.3s ease-in-out; 8 | cursor: pointer; 9 | } 10 | 11 | .kawaiiListGridCard:hover { 12 | transform: scale(1.05); 13 | } 14 | 15 | .kawaiiListGridCard:hover .kawaiiListGridCard_openModal { 16 | opacity: 100; 17 | } 18 | 19 | .kawaiiListGridCard_openModal { 20 | opacity: 0; 21 | position: absolute; 22 | top: var(--space-3); 23 | right: var(--space-3); 24 | transition: opacity 0.3s ease-in-out; 25 | color: var(--gray-9); 26 | } 27 | 28 | .kawaiiListGridCard__img { 29 | width: 100%; 30 | border-radius: var(--radius-5); 31 | display: flex; 32 | align-items: center; 33 | justify-content: center; 34 | } 35 | -------------------------------------------------------------------------------- /packages/react-kawaii/src/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const MOODS = ['sad', 'shocked', 'happy', 'blissful', 'lovestruck', 'excited', 'ko'] as const; 2 | 3 | export const DEFAULT_PROPS = { 4 | size: 240, 5 | mood: 'blissful', 6 | color: '#FFD882' 7 | } as const; 8 | 9 | export const PROPS_DATA = [ 10 | { 11 | name: 'size', 12 | type: 'number | string', 13 | description: 'Size of the SVG in px.', 14 | default: DEFAULT_PROPS.size 15 | }, 16 | { 17 | name: 'color', 18 | type: 'string', 19 | description: 'Color of the SVG.', 20 | default: DEFAULT_PROPS.color 21 | }, 22 | { 23 | name: 'mood', 24 | type: 'KawaiiMood', 25 | description: `Mood of the Kawaii face. Choose one of: ${MOODS.map((mood) => `"${mood}"`).join(', ')}`, 26 | default: DEFAULT_PROPS.mood 27 | } 28 | ]; 29 | -------------------------------------------------------------------------------- /apps/website/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env 29 | .env.local 30 | .env.development.local 31 | .env.test.local 32 | .env.production.local 33 | .env.staging 34 | 35 | # vercel 36 | .vercel 37 | 38 | .eslintcache 39 | *.tsbuildinfo 40 | 41 | # idea IDE 42 | /.idea 43 | /.iml 44 | .iml 45 | *.iml 46 | 47 | # mdx images are copied to public during build 48 | /public/mdx/** 49 | /public/robots.txt 50 | /public/sitemap.xml 51 | /public/sitemap-*.xml 52 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [elizabetdev] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username 14 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 15 | -------------------------------------------------------------------------------- /apps/website/src/components/codeBlock/codeBlock.css: -------------------------------------------------------------------------------- 1 | .codeBlock { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: flex-end; 6 | background-color: var(--color-code-bg); 7 | padding: var(--space-2); 8 | border-radius: var(--radius-3); 9 | max-width: 100%; /* Ensure the container doesn't overflow horizontally */ 10 | overflow-x: auto; /* Add horizontal scroll if needed */ 11 | } 12 | 13 | .codeBlock pre { 14 | padding: 0 !important; 15 | width: 100%; 16 | background-color: transparent !important; 17 | border: none !important; 18 | font-size: 14px !important; 19 | } 20 | 21 | .codeBlock code { 22 | background-color: transparent !important; 23 | white-space: pre-wrap !important; 24 | } 25 | 26 | .codeBlockCopyButton { 27 | position: absolute; 28 | top: var(--space-2); 29 | right: var(--space-2); 30 | cursor: pointer; 31 | } 32 | -------------------------------------------------------------------------------- /apps/website/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # website 2 | 3 | ## 0.0.9 4 | 5 | ### Patch Changes 6 | 7 | - Updated dependencies [2c1d199] 8 | - react-kawaii@1.6.0 9 | 10 | ## 0.0.8 11 | 12 | ### Patch Changes 13 | 14 | - Updated dependencies [f938a02] 15 | - react-kawaii@1.5.0 16 | 17 | ## 0.0.7 18 | 19 | ### Patch Changes 20 | 21 | - Updated dependencies [714b0a7] 22 | - react-kawaii@1.4.0 23 | 24 | ## 0.0.6 25 | 26 | ### Patch Changes 27 | 28 | - Updated dependencies [062df0c] 29 | - react-kawaii@1.3.1 30 | 31 | ## 0.0.5 32 | 33 | ### Patch Changes 34 | 35 | - Updated dependencies [15fec9a] 36 | - react-kawaii@1.3.0 37 | 38 | ## 0.0.4 39 | 40 | ### Patch Changes 41 | 42 | - Updated dependencies [c4e819e] 43 | - react-kawaii@1.2.0 44 | 45 | ## 0.0.3 46 | 47 | ### Patch Changes 48 | 49 | - Updated dependencies [ba8ae2d] 50 | - react-kawaii@1.1.0 51 | 52 | ## 0.0.2 53 | 54 | ### Patch Changes 55 | 56 | - Updated dependencies [7c4d57f] 57 | - react-kawaii@1.0.0 58 | -------------------------------------------------------------------------------- /packages/react-kawaii/src/index.ts: -------------------------------------------------------------------------------- 1 | export { Astronaut } from './components/Astronaut'; 2 | export { Backpack } from './components/Backpack'; 3 | export { Browser } from './components/Browser'; 4 | export { Cat } from './components/Cat'; 5 | export { Chocolate } from './components/Chocolate'; 6 | export { CreditCard } from './components/CreditCard'; 7 | export { Cyborg } from './components/Cyborg'; 8 | export { File } from './components/File'; 9 | export { Folder } from './components/Folder'; 10 | export { Ghost } from './components/Ghost'; 11 | export { HumanCat } from './components/HumanCat'; 12 | export { HumanDinosaur } from './components/HumanDinosaur'; 13 | export { IceCream } from './components/IceCream'; 14 | export { Mug } from './components/Mug'; 15 | export { Planet } from './components/Planet'; 16 | export { SpeechBubble } from './components/SpeechBubble'; 17 | 18 | export { DEFAULT_PROPS, MOODS, PROPS_DATA } from './constants'; 19 | 20 | export type { KawaiiProps } from './types'; 21 | -------------------------------------------------------------------------------- /apps/website/src/components/codeBlock/CodeBlock.tsx: -------------------------------------------------------------------------------- 1 | import { IconButton } from '@radix-ui/themes'; 2 | import { useTheme } from 'next-themes'; 3 | import { TbCopy } from 'react-icons/tb'; 4 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; 5 | import { nightOwl, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'; 6 | import './codeBlock.css'; 7 | 8 | type CodeBlockProps = { 9 | code: string; 10 | language?: string; 11 | }; 12 | export const CodeBlock = ({ code, language = 'jsx' }: CodeBlockProps) => { 13 | const { theme } = useTheme(); 14 | 15 | const codeblockTheme = theme === 'dark' ? nightOwl : oneLight; 16 | return ( 17 |
18 | navigator.clipboard.writeText(code)} className="codeBlockCopyButton"> 19 | 20 | 21 | 22 | 23 | {code} 24 | 25 |
26 | ); 27 | }; 28 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Elizabet aka Miuki Miu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /apps/website/LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Elizabet aka Miuki Miu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /apps/website/src/components/hero/Hero.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { Box, Button, Container, Flex, Heading, Text } from '@radix-ui/themes'; 4 | import NextLink from 'next/link'; 5 | import './hero.css'; 6 | 7 | export const Hero = () => { 8 | return ( 9 | 10 | 11 | 12 | 13 | Cute illustrations for React Apps 14 | 15 | 16 | React Kawaii is an open source library of cute SVG illustrations. Perfect if you want to give some cuteness 17 | to your React App. 18 | 19 | 20 | 25 | 28 | 29 | 30 | 31 | 32 | ); 33 | }; 34 | -------------------------------------------------------------------------------- /apps/website/src/components/button/ButtonThemeToggle.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import { MoonIcon, SunIcon } from '@radix-ui/react-icons'; 3 | import { IconButton } from '@radix-ui/themes'; 4 | import { useTheme } from 'next-themes'; 5 | import { useEffect, useState } from 'react'; 6 | import { AiOutlineLoading3Quarters } from 'react-icons/ai'; 7 | import './buttonThemeToggle.css'; 8 | 9 | export const ButtonThemeToggle = () => { 10 | const { theme, setTheme } = useTheme(); 11 | const [mounted, setMounted] = useState(false); 12 | 13 | useEffect(() => { 14 | setMounted(true); 15 | }, []); 16 | 17 | const isDarkTheme = theme === 'dark'; 18 | 19 | return ( 20 | { 27 | setTheme(isDarkTheme ? 'light' : 'dark'); 28 | }} 29 | > 30 | {!mounted ? ( 31 | 32 | ) : isDarkTheme ? ( 33 | 34 | ) : ( 35 | 36 | )} 37 | 38 | ); 39 | }; 40 | -------------------------------------------------------------------------------- /apps/website/src/components/kawaiiList/KawaiiList.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { Container, Flex } from '@radix-ui/themes'; 4 | import React, { useState } from 'react'; 5 | import { MOODS } from 'react-kawaii'; 6 | import { COLORS } from '../../constants'; 7 | import { KawaiiListGrid } from './KawaiiListGrid'; 8 | import { KawaiiListToolbar } from './KawaiiListToolbar'; 9 | 10 | export const KawaiiList = () => { 11 | const colors = [...COLORS]; 12 | const [color, setColor] = useState(colors[0]); 13 | const moods: string[] = [...MOODS]; 14 | const [mood, setMood] = useState('blissful'); 15 | const [size, setSize] = useState([240]); 16 | 17 | const onChangeColor = (color: any) => { 18 | setColor(color.hex); 19 | }; 20 | 21 | return ( 22 | 23 | 24 | 34 | 35 | 36 | 37 | ); 38 | }; 39 | -------------------------------------------------------------------------------- /apps/website/src/components/footer/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | text-align: center; 3 | padding-block: var(--space-4); 4 | } 5 | 6 | .footer__box { 7 | display: flex; 8 | flex-direction: row; 9 | align-items: center; 10 | justify-content: center; 11 | gap: var(--space-4); 12 | } 13 | 14 | .footer__text { 15 | display: inline-flex; 16 | align-items: center; 17 | } 18 | 19 | .footer__separator { 20 | width: 1px; 21 | height: 20px; 22 | background-color: var(--gray-6); 23 | opacity: 0.5; 24 | } 25 | 26 | .footer__icon-list { 27 | display: inline-flex; 28 | align-items: center; 29 | justify-content: center; 30 | gap: var(--space-4); 31 | list-style: none; 32 | padding: 0; 33 | margin: 0; 34 | } 35 | 36 | .footer__icon-list li { 37 | display: inline-flex; 38 | } 39 | 40 | .footer a { 41 | cursor: pointer; 42 | display: inline-flex; 43 | } 44 | 45 | .footer__text-link { 46 | transition: all 0.3s ease; 47 | color: var(--violet-a11); 48 | font-weight: 500; 49 | padding-left: var(--space-1); 50 | } 51 | 52 | .footer__text-link:hover { 53 | text-decoration: underline; 54 | } 55 | 56 | .footer__icon-link { 57 | color: var(--gray-a12); 58 | transition: transform 0.3s ease; 59 | } 60 | 61 | .footer__icon-link:hover { 62 | transform: scale(1.2); 63 | } 64 | 65 | .footer svg { 66 | width: var(--space-4); 67 | height: var(--space-4); 68 | } 69 | -------------------------------------------------------------------------------- /packages/react-kawaii/src/components/Planet.tsx: -------------------------------------------------------------------------------- 1 | import { FunctionComponent } from 'react'; 2 | import { DEFAULT_PROPS } from '../constants'; 3 | import { KawaiiProps } from '../types'; 4 | import { getFaceScale } from '../utils/getFaceScale'; 5 | import { Face } from './common/Face'; 6 | 7 | export const Planet: FunctionComponent = ({ 8 | size = 240, 9 | mood = 'blissful', 10 | color = '#A6E191', 11 | uniqueId, 12 | ...props 13 | } = DEFAULT_PROPS) => { 14 | const figmaFaceScale = getFaceScale(66); 15 | const figmaFaceXYPosition = '87 110'; 16 | 17 | return ( 18 | 19 | 25 | 32 | 33 | 34 | 35 | ); 36 | }; 37 | -------------------------------------------------------------------------------- /packages/react-kawaii/src/components/CreditCard.tsx: -------------------------------------------------------------------------------- 1 | import { FunctionComponent } from 'react'; 2 | import { DEFAULT_PROPS } from '../constants'; 3 | import { KawaiiProps } from '../types'; 4 | import { getFaceScale } from '../utils/getFaceScale'; 5 | import { Face } from './common/Face'; 6 | 7 | export const CreditCard: FunctionComponent = ({ 8 | size = 240, 9 | mood = 'blissful', 10 | color = '#A6E191', 11 | uniqueId, 12 | ...props 13 | } = DEFAULT_PROPS) => { 14 | const figmaFaceScale = getFaceScale(54.33); 15 | const figmaFaceXYPosition = '93.33 121.1'; 16 | 17 | return ( 18 | 19 | 23 | 30 | 31 | 32 | 33 | 34 | ); 35 | }; 36 | -------------------------------------------------------------------------------- /apps/website/src/components/button/ButtonGithubStars.tsx: -------------------------------------------------------------------------------- 1 | 'use server'; 2 | 3 | import { GitHubLogoIcon } from '@radix-ui/react-icons'; 4 | import { Link, Text } from '@radix-ui/themes'; 5 | import '@radix-ui/themes/tokens.css'; 6 | import { isNumber } from 'lodash'; 7 | import { FC } from 'react'; 8 | import './buttonGitHubStars.css'; 9 | 10 | type GitHubRepo = { 11 | stargazers_count: number; 12 | }; 13 | 14 | const fetchGitHubRepoStars = async (): Promise => { 15 | try { 16 | const response = await fetch('https://api.github.com/repos/elizabetdev/react-kawaii'); 17 | if (!response.ok) { 18 | throw new Error(`Error fetching repository: ${response.statusText}`); 19 | } 20 | const repo: GitHubRepo = await response.json(); 21 | return repo.stargazers_count; 22 | } catch (error) { 23 | console.error(error); 24 | return undefined; 25 | } 26 | }; 27 | 28 | const formatNumber = (num: number) => { 29 | if (num >= 1000) { 30 | return (num / 1000).toFixed(1) + 'k'; 31 | } else { 32 | return num; 33 | } 34 | }; 35 | 36 | export const ButtonGitHubStars: FC = async () => { 37 | const githubStars = await fetchGitHubRepoStars(); 38 | return ( 39 | 40 | 41 | 42 | 43 | {isNumber(githubStars) && {formatNumber(githubStars)}} 44 | 45 | 46 | ); 47 | }; 48 | -------------------------------------------------------------------------------- /packages/react-kawaii/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-kawaii", 3 | "main": "./dist/index.js", 4 | "module": "./dist/index.mjs", 5 | "types": "./dist/index.d.ts", 6 | "files": [ 7 | "dist" 8 | ], 9 | "exports": { 10 | ".": { 11 | "types": "./dist/index.d.ts", 12 | "default": "./dist/index.js" 13 | } 14 | }, 15 | "version": "1.6.0", 16 | "homepage": "https://github.com/elizabetdev/react-kawaii#readme", 17 | "license": "MIT", 18 | "scripts": { 19 | "lint": "eslint ./src", 20 | "test": "jest", 21 | "tsc": "tsc --noEmit", 22 | "generate-illustrations": "tsx ./scripts/generate.ts", 23 | "build": "tsup src/index.ts --format cjs,esm --dts", 24 | "dev": "npm run build -- --watch" 25 | }, 26 | "devDependencies": { 27 | "@svgr/core": "^8.1.0", 28 | "@svgr/plugin-jsx": "^8.1.0", 29 | "@svgr/plugin-prettier": "^8.1.0", 30 | "@svgr/plugin-svgo": "^8.1.0", 31 | "@swc/core": "^1.5.7", 32 | "@types/jest": "^29.5.12", 33 | "@types/react": "^19.0.7", 34 | "@types/react-dom": "^19.0.3", 35 | "change-case": "^5.4.3", 36 | "eslint-config-react-kawaii": "workspace:*", 37 | "glob": "^10.3.10", 38 | "jest": "^29.7.0", 39 | "react": "^19.0.0", 40 | "react-dom": "^19.0.0", 41 | "tsconfig": "workspace:*", 42 | "tsup": "^8.0.2", 43 | "typescript": "^5.4.5" 44 | }, 45 | "peerDependencies": { 46 | "react": "^17.0.0 || ^18.0.0 || ^19.0.0" 47 | }, 48 | "publishConfig": { 49 | "access": "public" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /scripts/checkSubprojects.ts: -------------------------------------------------------------------------------- 1 | // typescript script to find all the pnpm subprojects and check they have a "lint" and "tsc" script 2 | 3 | import childProcess from 'child_process'; 4 | import * as fs from 'fs'; 5 | import * as path from 'path'; 6 | 7 | const command = `pnpm m ls --json --depth=-1`; 8 | 9 | type Project = { 10 | name: string; 11 | version: string; 12 | path: string; 13 | private: boolean; 14 | }; 15 | 16 | const projects = JSON.parse(childProcess.execSync(command).toString()) as Project[]; 17 | 18 | const subProjects = projects 19 | .filter((project) => project.name !== 'xata-private') 20 | .map((project) => { 21 | const packageJson = JSON.parse(fs.readFileSync(path.join(project.path, 'package.json')).toString()); 22 | return { ...project, packageJson }; 23 | }); 24 | 25 | const EXCLUDE_FROM_LINT = ['tsconfig', 'eslint-config-react-kawaii']; 26 | const EXCLUDE_FROM_TSC = ['tsconfig', 'eslint-config-react-kawaii']; 27 | 28 | const errors: string[] = []; 29 | for (const subProject of subProjects) { 30 | const { packageJson } = subProject; 31 | const { scripts = {}, name } = packageJson; 32 | 33 | if (!EXCLUDE_FROM_LINT.includes(name) && !scripts.lint) { 34 | errors.push(`Subproject ${name} is missing a lint script`); 35 | } 36 | 37 | if (!EXCLUDE_FROM_TSC.includes(name) && !scripts.tsc) { 38 | errors.push(`Subproject ${name} is missing a tsc script`); 39 | } 40 | } 41 | 42 | if (errors.length > 0) { 43 | console.error(errors.join('\n')); 44 | process.exit(1); 45 | } 46 | 47 | console.log('All subprojects have a lint and tsc script'); 48 | -------------------------------------------------------------------------------- /apps/website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "website", 3 | "version": "0.0.9", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "eslint .", 10 | "tsc": "tsc --noEmit" 11 | }, 12 | "dependencies": { 13 | "@chakra-ui/next-js": "^2.2.0", 14 | "@emotion/styled": "^11.11.5", 15 | "@next/third-parties": "15.1.5", 16 | "@radix-ui/react-icons": "^1.3.2", 17 | "@radix-ui/react-select": "2.1.4", 18 | "@radix-ui/themes": "^3.1.6", 19 | "@uiw/react-color": "^2.3.0", 20 | "framer-motion": "11.18.1", 21 | "mdx-bundler": "^10.0.2", 22 | "next": "15.1.5", 23 | "next-themes": "^0.4.4", 24 | "react": "19.0.0", 25 | "react-dom": "19.0.0", 26 | "react-icons": "^5.2.1", 27 | "react-kawaii": "workspace:*", 28 | "reset-css": "^5.0.2", 29 | "sharp": "=0.32.6", 30 | "typescript": "5.4.5" 31 | }, 32 | "devDependencies": { 33 | "@chakra-ui/cli": "^2.4.1", 34 | "@chakra-ui/styled-system": "^2.9.2", 35 | "@mdx-js/loader": "^3.0.1", 36 | "@mdx-js/react": "^3.0.1", 37 | "@next/mdx": "^14.2.3", 38 | "@types/chroma-js": "^2.4.4", 39 | "@types/lodash": "^4.17.4", 40 | "@types/mdx": "^2.0.13", 41 | "@types/react": "^19.0.7", 42 | "@types/react-dom": "^19.0.3", 43 | "@types/react-syntax-highlighter": "^15.5.13", 44 | "dotenv": "^16.4.5", 45 | "eslint-config-react-kawaii": "workspace:*", 46 | "lodash": "^4.17.21", 47 | "react-syntax-highlighter": "^15.5.0", 48 | "tsconfig": "workspace:*" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /packages/react-kawaii/src/components/IceCream.tsx: -------------------------------------------------------------------------------- 1 | import { FunctionComponent } from 'react'; 2 | import { DEFAULT_PROPS } from '../constants'; 3 | import { KawaiiProps } from '../types'; 4 | import { getFaceScale } from '../utils/getFaceScale'; 5 | import { Face } from './common/Face'; 6 | 7 | export const IceCream: FunctionComponent = ({ 8 | size = 240, 9 | mood = 'blissful', 10 | color = '#A6E191', 11 | uniqueId, 12 | ...props 13 | } = DEFAULT_PROPS) => { 14 | const figmaFaceScale = getFaceScale(53.99); 15 | const figmaFaceXYPosition = '93.38 96.26'; 16 | 17 | return ( 18 | 19 | 23 | 27 | 34 | 35 | 36 | 37 | ); 38 | }; 39 | -------------------------------------------------------------------------------- /packages/react-kawaii/src/components/SpeechBubble.tsx: -------------------------------------------------------------------------------- 1 | import { FunctionComponent } from 'react'; 2 | import { DEFAULT_PROPS } from '../constants'; 3 | import { KawaiiProps } from '../types'; 4 | import { getFaceScale } from '../utils/getFaceScale'; 5 | import { Face } from './common/Face'; 6 | 7 | export const SpeechBubble: FunctionComponent = ({ 8 | size = 240, 9 | mood = 'blissful', 10 | color = '#A6E191', 11 | uniqueId, 12 | ...props 13 | } = DEFAULT_PROPS) => { 14 | const figmaFaceScale = getFaceScale(56.77); 15 | const figmaFaceXYPosition = '91.61 108.57'; 16 | 17 | return ( 18 | 19 | 23 | 28 | 29 | 30 | 31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /packages/react-kawaii/src/components/Mug.tsx: -------------------------------------------------------------------------------- 1 | import { FunctionComponent } from 'react'; 2 | import { DEFAULT_PROPS } from '../constants'; 3 | import { KawaiiProps } from '../types'; 4 | import { getFaceScale } from '../utils/getFaceScale'; 5 | import { Face } from './common/Face'; 6 | 7 | export const Mug: FunctionComponent = ({ 8 | size = 240, 9 | mood = 'blissful', 10 | color = '#A6E191', 11 | uniqueId, 12 | ...props 13 | } = DEFAULT_PROPS) => { 14 | const figmaFaceScale = getFaceScale(53.95); 15 | const figmaFaceXYPosition = '93.03 107.33'; 16 | 17 | return ( 18 | 19 | 25 | 32 | 33 | 34 | 35 | ); 36 | }; 37 | -------------------------------------------------------------------------------- /packages/react-kawaii/src/components/File.tsx: -------------------------------------------------------------------------------- 1 | import { FunctionComponent } from 'react'; 2 | import { DEFAULT_PROPS } from '../constants'; 3 | import { KawaiiProps } from '../types'; 4 | import { getFaceScale } from '../utils/getFaceScale'; 5 | import { Face } from './common/Face'; 6 | 7 | export const File: FunctionComponent = ({ 8 | size = 240, 9 | mood = 'blissful', 10 | color = '#A6E191', 11 | uniqueId, 12 | ...props 13 | } = DEFAULT_PROPS) => { 14 | const figmaFaceScale = getFaceScale(52); 15 | const figmaFaceXYPosition = '94 123'; 16 | 17 | return ( 18 | 19 | 25 | 32 | 39 | 40 | 41 | 42 | ); 43 | }; 44 | -------------------------------------------------------------------------------- /packages/react-kawaii/src/components/Folder.tsx: -------------------------------------------------------------------------------- 1 | import { FunctionComponent } from 'react'; 2 | import { DEFAULT_PROPS } from '../constants'; 3 | import { KawaiiProps } from '../types'; 4 | import { getFaceScale } from '../utils/getFaceScale'; 5 | import { Face } from './common/Face'; 6 | 7 | export const Folder: FunctionComponent = ({ 8 | size = 240, 9 | mood = 'blissful', 10 | color = '#A6E191', 11 | uniqueId, 12 | ...props 13 | } = DEFAULT_PROPS) => { 14 | const figmaFaceScale = getFaceScale(52); 15 | const figmaFaceXYPosition = '94 116'; 16 | 17 | return ( 18 | 19 | 23 | 28 | 33 | 34 | 35 | 36 | ); 37 | }; 38 | -------------------------------------------------------------------------------- /apps/website/src/components/footer/Footer.tsx: -------------------------------------------------------------------------------- 1 | import { Box, Container } from '@radix-ui/themes'; 2 | import NextLink from 'next/link'; 3 | import React from 'react'; 4 | import { FaBluesky, FaInstagram, FaXTwitter } from 'react-icons/fa6'; 5 | import { TbWorldWww } from 'react-icons/tb'; 6 | import './footer.css'; 7 | 8 | export const Footer = () => { 9 | return ( 10 |
11 | 12 |
13 | 14 | Created by{' '} 15 | 16 | elizabet.dev 17 | {' '} 18 | 19 |
20 |
    21 |
  • 22 | 23 | 24 | 25 |
    • 26 |
  • 27 | 28 | 29 | 30 |
    • 31 |
  • 32 | 33 | 34 | 35 |
    • 36 |
  • 37 | {' '} 38 | 39 | 40 | 41 |
    • 42 |
43 |
44 | 45 |
46 | ); 47 | }; 48 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-kawaii", 3 | "version": "0.18.0", 4 | "description": "React Kawaii is a library of cute SVG illustrations (react components). Ideal if you want to give some cuteness and personality to your react application.", 5 | "main": "dist/index.js", 6 | "types": "dist/index.d.ts", 7 | "private": true, 8 | "scripts": { 9 | "build": "turbo run build", 10 | "start": "turbo run start", 11 | "dev": "turbo run dev --filter website", 12 | "lint": "turbo run lint", 13 | "test": "turbo run test", 14 | "tsc": "turbo run tsc", 15 | "format-check": "prettier --check \"./**/*.{ts,tsx,css,json,md,yml,yaml}\"", 16 | "format-write": "prettier --write \"./**/*.{ts,tsx,css,json,md,yml,yaml}\"", 17 | "check-subprojects": "tsx scripts/checkSubprojects.ts", 18 | "prepare": "husky", 19 | "changeset": "changeset", 20 | "publish-packages": "turbo run build lint test && changeset version && changeset publish" 21 | }, 22 | "keywords": [], 23 | "author": "", 24 | "license": "MIT", 25 | "devDependencies": { 26 | "@types/prettier": "^2.7.3", 27 | "husky": "^9.1.7", 28 | "lint-staged": "^15.4.1", 29 | "prettier": "^2.8.8", 30 | "prettier-plugin-organize-imports": "^3.2.4", 31 | "tsx": "^4.19.2", 32 | "turbo": "^2.3.3", 33 | "typescript": "^5.7.3" 34 | }, 35 | "lint-staged": { 36 | "*.{js,ts,tsx}": [ 37 | "npx prettier --config=.prettierrc.precommit.js --write" 38 | ], 39 | "*.{css,json,md,yml,yaml}": [ 40 | "npx prettier --write" 41 | ] 42 | }, 43 | "pnpm": { 44 | "overrides": { 45 | "@mdx-js/esbuild": "3.0.0", 46 | "@mdx-js/mdx": "3.0.0", 47 | "remark-mdx": "3.0.0", 48 | "remark-parse": "11.0.0", 49 | "remark-stringify": "11.0.0", 50 | "unified": "11.0.4" 51 | } 52 | }, 53 | "dependencies": { 54 | "@changesets/cli": "^2.27.11" 55 | }, 56 | "packageManager": "pnpm@9.15.4" 57 | } 58 | -------------------------------------------------------------------------------- /packages/react-kawaii/src/components/Ghost.tsx: -------------------------------------------------------------------------------- 1 | import { FunctionComponent } from 'react'; 2 | import { DEFAULT_PROPS } from '../constants'; 3 | import { KawaiiProps } from '../types'; 4 | import { getFaceScale } from '../utils/getFaceScale'; 5 | import { Face } from './common/Face'; 6 | 7 | export const Ghost: FunctionComponent = ({ 8 | size = 240, 9 | mood = 'blissful', 10 | color = '#A6E191', 11 | uniqueId, 12 | ...props 13 | } = DEFAULT_PROPS) => { 14 | const figmaFaceScale = getFaceScale(62.06); 15 | const figmaFaceXYPosition = '89.09 99.3'; 16 | 17 | return ( 18 | 19 | 25 | 32 | 33 | 34 | 35 | ); 36 | }; 37 | -------------------------------------------------------------------------------- /apps/website/src/components/header/Header.tsx: -------------------------------------------------------------------------------- 1 | import { Box, Button, Container, Flex, Text } from '@radix-ui/themes'; 2 | import NextImage from 'next/image'; 3 | import NextLink from 'next/link'; 4 | import { ButtonGitHubStars } from '~/components/button/ButtonGithubStars'; 5 | import { ButtonThemeToggle } from '~/components/button/ButtonThemeToggle'; 6 | import './header.css'; 7 | 8 | export const Header = () => { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | 21 | 22 | 23 | 24 | 25 | React Kawaii 26 | 27 | 28 | 29 | 30 | 31 | 38 | 43 | 44 | Get Started 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | ); 55 | }; 56 | -------------------------------------------------------------------------------- /apps/website/src/components/kawaiiList/KawaiiListGrid.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { Box, Card, Flex, Grid, Heading, Link } from '@radix-ui/themes'; 4 | import { FC, isValidElement } from 'react'; 5 | import { TbCode } from 'react-icons/tb'; 6 | import * as Illustration from 'react-kawaii'; 7 | import { KawaiiProps } from 'react-kawaii'; 8 | import { KawaiiListDialog } from './KawaiiListDialog'; 9 | import './kawaiiListGrid.css'; 10 | 11 | type KawaiiListGrid = { 12 | color: string; 13 | mood: string; 14 | size: number; 15 | }; 16 | 17 | export const KawaiiListGrid: FC = ({ color, mood, size }) => { 18 | return ( 19 | <> 20 | 27 | {Object.entries(Illustration).map(([illustrationName, Illustration]) => { 28 | if (typeof Illustration === 'function' && isValidElement() && illustrationName !== 'MOODS') { 29 | return ( 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | {illustrationName} 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | ); 48 | } 49 | 50 | return null; 51 | })} 52 | 53 | 54 | ); 55 | }; 56 | -------------------------------------------------------------------------------- /packages/react-kawaii/dist/index.d.mts: -------------------------------------------------------------------------------- 1 | import { SVGProps, FunctionComponent } from 'react'; 2 | 3 | declare const MOODS: readonly ["sad", "shocked", "happy", "blissful", "lovestruck", "excited", "ko"]; 4 | declare const DEFAULT_PROPS: { 5 | readonly size: 240; 6 | readonly mood: "blissful"; 7 | readonly color: "#FFD882"; 8 | }; 9 | declare const PROPS_DATA: ({ 10 | name: string; 11 | type: string; 12 | description: string; 13 | default: 240; 14 | } | { 15 | name: string; 16 | type: string; 17 | description: string; 18 | default: "#FFD882"; 19 | } | { 20 | name: string; 21 | type: string; 22 | description: string; 23 | default: "blissful"; 24 | })[]; 25 | 26 | type KawaiiMood = (typeof MOODS)[number]; 27 | type KawaiiProps = SVGProps & { 28 | size?: number | string; 29 | color?: string; 30 | mood?: KawaiiMood; 31 | uniqueId?: string; 32 | }; 33 | 34 | declare const Astronaut: FunctionComponent; 35 | 36 | declare const Backpack: FunctionComponent; 37 | 38 | declare const Browser: FunctionComponent; 39 | 40 | declare const Cat: FunctionComponent; 41 | 42 | declare const Chocolate: FunctionComponent; 43 | 44 | declare const CreditCard: FunctionComponent; 45 | 46 | declare const Cyborg: FunctionComponent; 47 | 48 | declare const File: FunctionComponent; 49 | 50 | declare const Folder: FunctionComponent; 51 | 52 | declare const Ghost: FunctionComponent; 53 | 54 | declare const HumanCat: FunctionComponent; 55 | 56 | declare const HumanDinosaur: FunctionComponent; 57 | 58 | declare const IceCream: FunctionComponent; 59 | 60 | declare const Mug: FunctionComponent; 61 | 62 | declare const Planet: FunctionComponent; 63 | 64 | declare const SpeechBubble: FunctionComponent; 65 | 66 | export { Astronaut, Backpack, Browser, Cat, Chocolate, CreditCard, Cyborg, DEFAULT_PROPS, File, Folder, Ghost, HumanCat, HumanDinosaur, IceCream, type KawaiiProps, MOODS, Mug, PROPS_DATA, Planet, SpeechBubble }; 67 | -------------------------------------------------------------------------------- /packages/react-kawaii/dist/index.d.ts: -------------------------------------------------------------------------------- 1 | import { SVGProps, FunctionComponent } from 'react'; 2 | 3 | declare const MOODS: readonly ["sad", "shocked", "happy", "blissful", "lovestruck", "excited", "ko"]; 4 | declare const DEFAULT_PROPS: { 5 | readonly size: 240; 6 | readonly mood: "blissful"; 7 | readonly color: "#FFD882"; 8 | }; 9 | declare const PROPS_DATA: ({ 10 | name: string; 11 | type: string; 12 | description: string; 13 | default: 240; 14 | } | { 15 | name: string; 16 | type: string; 17 | description: string; 18 | default: "#FFD882"; 19 | } | { 20 | name: string; 21 | type: string; 22 | description: string; 23 | default: "blissful"; 24 | })[]; 25 | 26 | type KawaiiMood = (typeof MOODS)[number]; 27 | type KawaiiProps = SVGProps & { 28 | size?: number | string; 29 | color?: string; 30 | mood?: KawaiiMood; 31 | uniqueId?: string; 32 | }; 33 | 34 | declare const Astronaut: FunctionComponent; 35 | 36 | declare const Backpack: FunctionComponent; 37 | 38 | declare const Browser: FunctionComponent; 39 | 40 | declare const Cat: FunctionComponent; 41 | 42 | declare const Chocolate: FunctionComponent; 43 | 44 | declare const CreditCard: FunctionComponent; 45 | 46 | declare const Cyborg: FunctionComponent; 47 | 48 | declare const File: FunctionComponent; 49 | 50 | declare const Folder: FunctionComponent; 51 | 52 | declare const Ghost: FunctionComponent; 53 | 54 | declare const HumanCat: FunctionComponent; 55 | 56 | declare const HumanDinosaur: FunctionComponent; 57 | 58 | declare const IceCream: FunctionComponent; 59 | 60 | declare const Mug: FunctionComponent; 61 | 62 | declare const Planet: FunctionComponent; 63 | 64 | declare const SpeechBubble: FunctionComponent; 65 | 66 | export { Astronaut, Backpack, Browser, Cat, Chocolate, CreditCard, Cyborg, DEFAULT_PROPS, File, Folder, Ghost, HumanCat, HumanDinosaur, IceCream, type KawaiiProps, MOODS, Mug, PROPS_DATA, Planet, SpeechBubble }; 67 | -------------------------------------------------------------------------------- /apps/website/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import { GoogleAnalytics } from '@next/third-parties/google'; 2 | import { Box, Flex, Theme } from '@radix-ui/themes'; 3 | import '@radix-ui/themes/styles.css'; 4 | import { Metadata } from 'next'; 5 | import { ThemeProvider as NextThemesProvider } from 'next-themes'; 6 | import { Baloo_2, Inter } from 'next/font/google'; 7 | import 'reset-css'; 8 | import { Footer } from '~/components/footer/Footer'; // Import the Footer component 9 | import { Header } from '~/components/header/Header'; 10 | import '../global.css'; 11 | 12 | const baloo = Baloo_2({ 13 | weight: ['800'], 14 | subsets: ['latin'], 15 | display: 'swap', 16 | variable: '--font-baloo' 17 | }); 18 | 19 | export const metadata: Metadata = { 20 | title: 'React Kawaii', 21 | description: 22 | 'React Kawaii is an open source library of cute SVG illustrations. Perfect if you want to give some cuteness to your React App.', 23 | twitter: { 24 | card: 'summary_large_image', 25 | creator: '@elizabet_dev' 26 | }, 27 | openGraph: { 28 | type: 'website', 29 | title: 'React Kawaii', 30 | description: 31 | 'React Kawaii is an open source library of cute SVG illustrations. Perfect if you want to give some cuteness to your React App.', 32 | images: [ 33 | { 34 | url: 'https://react-kawaii.vercel.app/images/react-kawaii-open-graph.png', 35 | width: 1200, 36 | height: 630 37 | } 38 | ] 39 | } 40 | }; 41 | 42 | export default function RootLayout({ children }: { children: React.ReactNode }) { 43 | return ( 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | {children} 52 |