![Coolshapes](https://coolshap.es/preview.jpg)
Coolshapes
A simple, fun project for the sake of creating some cool-looking abstract shapes with little grainy gradients crafted by @realvjy. Coolshapes is a completely open-source set of 100+ abstract shapes crafted for any design and development projects. Free for both commercial and personal use. Licensed under MIT.
Table of Contents
Installation
npm install coolshapes-react
or
yarn add coolshapes-react
How to use
There are two types of components available in Coolshapes, which you can use: Global component and Component
for each category of shapes. and, you can pass additional props to adjust the shapes.
Global component example
Just import the Global component Coolshape
and it will work.
import { Coolshape } from "coolshapes-react";
const App = () => {
return <Coolshape type="star" index={0} size={48} noise={true}/>;
};
export default App;
Component with shape category example
You can import the component for specific category - Star
,Ellipse
... etc - and simply pass the index of the shape.
import { Star } from "coolshapes-react";
const App = () => {
return <Star index={0} size={48}/>;
};
export default App;
Generating random shapes
setting the random
prop to true or leaving the index
or type
prop empty would replace the shape with a
random shape every time it renders.
const Component = () => {
return <Coolshape random={true}/>;
};
const Component2 = () => {
return <Coolshape type="star" random={true}/>;
};
Using random shape function
import { getRandomShape } from "coolshapes-react";
getRandomShape();
getRandomShape({ type: "ellipse" });
getRandomShape({ onlyId: true });
getRandomShape({ onlyId: true, type: "star" });
Other Methods
All the components are mapped from object that we have given you access to
const shapes = {
star: [Star1, Star2, ...],
ellipse: [Ellipse1, Ellipse2, ...],
...
}
Renders the shapes from all categories
import { shapes } from "coolshapes-react";
const ShapeGrid = () => {
return (
<>
{
Object.keys(shapes).map((shapeType, _) => {
return shapes[shapeType].map((Shape, index) => {
return <Shape size={48} />;
});
})}
</>
);
};
syntax
shapes[type][index];
const starComponents = shapes["star"];
const StarComponent1 = starComponents[0];
Props
name | data type | default | description |
---|
size | Number | 200 | The dimension of shape |
type | String | random | The category of shapes, if left empty it will randomly select a category. |
noise | Boolean | true | Whether to add noise to the shape or not. |
index | Number | random | The index of shape within the shape category, it would randomly select a shape from the category if type prop given. index starts from 0. |
random | Boolean | false | If set true it will select a random component |
notes
Index starts from number 0, so if you want to retrieve the first shape of any category, you would use the index number 0.
The shapes are SVG components behind the hood, so it's also supports all the props that can be passed in a svg element.
Categories
There are a total of 115 shapes available in Coolshapes under the following categories.
name | count |
---|
star | 13 |
triangle | 14 |
moon | 15 |
polygon | 8 |
flower | 16 |
rectangle | 9 |
ellipse | 12 |
wheel | 7 |
misc | 11 |
number | 10 |
Note: While passing the category name in the component, the name will be in lower case.
Others
ClassNames and css
all the components have classname coolshapes
assigned as default, but you can also pass custom classname of yours.
import { Star } from 'coolshapes-react';
export const Shape = () => {
return(
<Star className={"myshape"}/>
)
}
.coolshapes{
width: 100%;
max-height: 48px;
}
Builds
We have given umd
, es
and cjs
versions of the build.
cjs
const Coolshapes = require("coolshapes-react");
Using with react in the browser
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/coolshapes-react/dist/umd/coolshapes.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const domContainer = document.querySelector("#root");
const root = ReactDOM.createRoot(domContainer);
const coolshapes = window.coolshapes;
const Coolshape = coolshapes.Coolshape;
root.render(<Coolshape />);
</script>
</body>
</html>
unpkg
https://unpkg.com/coolshapes-react/dist/umd/coolshapes.js
Figma File
Grab it from Figma Community
Credits
-
Crafted by realvjy. You are always welcome to share your feedback on twitter or any other social media platform.
-
Noisy Gradients Plugin - Some of the gradients generated using Noisy Gradients Figma plugin
Contributing
If you want to contribute, create a pull request.
Support & Donation
Coffee fuels design & coding ☕️
![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png)