How to Use CoolShapes Abstract Shapes in a React or Design Project

Updated

CoolShapes is an open-source set of 100+ abstract shapes with grainy gradients, released under the MIT License for both commercial and personal projects. To use it, install the package and import shapes into your React project, or download the Figma file or individual SVG/PNG assets for design work. The site provides React package, SVG, JSX, and PNG options, so your choice depends on whether you're building in code or designing in a tool.

What CoolShapes Provides

The project, crafted by realvjy, offers a library of abstract shapes with a grainy gradient style. According to the site, each shape is available in multiple formats:

Format Best For
React package Developers adding shapes directly to a React app
SVG Design tools and web use where you want scalable vector assets
JSX React projects that prefer inline component code
PNG Quick mockups or tools that don't handle vectors well

The site also offers a Figma file download, which is useful if you want to browse all shapes visually and drop them into a design file.

Using CoolShapes in a React Project

The site's "How to use?" section outlines three steps.

1. Install the package

Install the CoolShapes package through your package manager. The site lists this as the first step under "Install package"; check the GitHub repository or detailed documentation linked from the site for the exact package name and command, since the excerpt doesn't spell it out.

2. Import it into your React project

After installing, import the shapes into your React component. The site's second step is "Import it to Your React." The expected result is that the shape components become available in your JSX.

3. Use the example as a starting point

The site includes a "Here some example" section showing usage. Start from that example and swap in the shapes you want. If you prefer not to add a dependency, you can instead copy the JSX or SVG for an individual shape from the site and paste it into your component.

Choosing Between SVG, JSX, and PNG

  • Use JSX or the React package when the shapes live inside a React codebase and you want them as components you can style and reuse.
  • Use SVG when you're working in a design tool, a non-React site, or any workflow that accepts vector files. SVG stays sharp at any size.
  • Use PNG when you need a quick raster image for a mockup, slide, or a tool that doesn't support vectors. PNG won't scale as cleanly.

For design-first work, download the Figma file to see the full set, then export what you need.

Licensing and Reuse

CoolShapes is described as completely open-source under the MIT License, free for commercial and personal projects. That means you can use the shapes in client work and products without a separate license purchase, though you should keep the license terms in mind if you redistribute the assets themselves.

Common Snags

  • Can't find the install command: The excerpt names the step but not the exact package. Use the GitHub link or detailed documentation on the site for the current command.
  • Shape looks different from the preview: The grainy gradient effect may depend on the format. If a PNG looks flat or blurry, try the SVG or JSX version.
  • Import errors in React: Confirm you're importing from the correct package path shown in the site's example, and that your build setup handles the file type you chose.
  • Need help: The site points to @realvjy or the GitHub issues page for questions and suggestions.

Quick Decision Guide

If you're a developer, install the package and follow the three-step example. If you're a designer, download the Figma file or grab individual SVGs. If you just need a one-off image, use a PNG. In all cases, the MIT License covers commercial and personal use.