Nerilla Shapes

A beautiful, customizable collection of SVG shape components for React. Use them as backgrounds, buttons, badges, or decorative elements in your next project!

Installation

Install the package via npm or yarn:

npm install nerilla-shapes

or

yarn add nerilla-shapes

Note: nerilla-shapes requires react >= 16.8.0 and react-dom >= 16.8.0 as peer dependencies.

Quick Start

Import the shapes you need and drop them into your components:

import { WavyShape, SparkleShape, StarBurstShape } from 'nerilla-shapes';

function App() {
  return (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
      <WavyShape 
        text="Hello!" 
        color="purple" 
        textColor="white" 
        hoverColor="pink" 
        hoverScale={1.1} 
      />
      <SparkleShape width={50} height={50} color="gold" hoverColor="orange" />
      <StarBurstShape text="New" color="tomato" textColor="white" hoverScale={1.2} />
    </div>
  );
}

export default App;

Global Prop Overrides

All shapes now support standard CSS overrides and transition customisations natively:

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | hoverScale | number | undefined | Interactive scale-factor on hover (e.g. 1.1 to grow 10%) | | transitionDuration | number | 200 | Hover transition duration speed in milliseconds | | className | string | undefined | Custom classes (Tailwind CSS compatible, e.g. hover:rotate-6) | | style | CSSProperties | undefined | Inline style overrides |

Shapes & Props

WavyShape

A smooth, wavy blob shape, perfect for tags or labels.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 88.03 | Width of the shape in pixels | | height | number | 36.08 | Height of the shape in pixels | | color | string | '#E0FFE4' | Fill color of the shape | | strokeColor | string | 'black' | Border color of the shape | | strokeWidth | number | 4 | Border thickness | | zIndex | number | 308 | Z-index of the container | | text | string | undefined | Text to display over the shape | | textColor | string | 'black' | Color of the text overlay | | fontSize | string \| number | undefined | Font size of the overlay text (e.g., '14px', '1.2rem') | | fontFamily | string | undefined | Font family of the overlay text (e.g., 'Inter', 'font-qomra') | | hoverColor | string | undefined | Dynamic background fill color on hover | | hoverStrokeColor | string | undefined | Dynamic border color on hover | | hoverTextColor | string | undefined | Dynamic overlay text color on hover |

WavyShapeCompact

A tighter, more condensed wavy blob shape.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 158.29 | Width of the shape in pixels | | height | number | 41.41 | Height of the shape in pixels | | color | string | '#E0FFE4' | Fill color of the shape | | strokeColor | string | 'black' | Border color of the shape | | strokeWidth | number | 5 | Border thickness | | zIndex | number | 318 | Z-index of the container | | text | string | undefined | Text to display over the shape | | textColor | string | 'black' | Color of the text overlay | | fontSize | string \| number | undefined | Font size of the overlay text (e.g., '14px', '1.2rem') | | fontFamily | string | undefined | Font family of the overlay text (e.g., 'Inter', 'font-qomra') | | hoverColor | string | undefined | Dynamic background fill color on hover | | hoverStrokeColor | string | undefined | Dynamic border color on hover | | hoverTextColor | string | undefined | Dynamic overlay text color on hover |

WavyShape3 (Multi-Pill Shape)

An overlapping pill shape that stretches. Great for buttons! Uses children instead of text for fully customizable content.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 309 | Width of the shape in pixels | | height | number | 205 | Height of the shape in pixels | | color | string | '#0080FF' | Fill color of the shape | | zIndex | number | 1 | Z-index of the container | | children | ReactNode | undefined | Custom content to render inside the shape | | hoverColor | string | undefined | Dynamic background fill color on hover |

SparkleShape

A sparkly star shape for highlights or decorations.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 13.8 | Width of the shape in pixels | | height | number | 12.26 | Height of the shape in pixels | | color | string | 'black' | Fill color of the shape | | strokeColor | string | 'none' | Border color of the shape | | strokeWidth | number | 0 | Border thickness | | zIndex | number | 319 | Z-index of the container | | hoverColor | string | undefined | Dynamic background fill color on hover | | hoverStrokeColor | string | undefined | Dynamic border color on hover |

SmileyShape

A cute, round smiley face blob.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 16.1 | Width of the shape in pixels | | height | number | 18.51 | Height of the shape in pixels | | color | string | 'black' | Fill color of the face | | detailsColor | string | 'white' | Color of the eyes, smile, and eyebrows | | strokeColor | string | 'black' | Border color of the face | | strokeWidth | number | 1 | Border thickness | | detailsStrokeWidth | number | 5 | Thickness of the smile/eyebrows | | zIndex | number | 318 | Z-index of the container | | hoverColor | string | undefined | Dynamic background face color on hover | | hoverDetailsColor | string | undefined | Dynamic eye/eyebrow/smile detail color on hover | | hoverStrokeColor | string | undefined | Dynamic border stroke color on hover |

CloverShape

A four-leaf clover shape.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 44 | Width of the shape in pixels | | height | number | 39.43 | Height of the shape in pixels | | color | string | '#7FBC8C' | Fill color of the shape | | strokeColor | string | 'black' | Border color of the shape | | strokeWidth | number | 3 | Border thickness | | zIndex | number | 372 | Z-index of the container | | hoverColor | string | undefined | Dynamic background fill color on hover | | hoverStrokeColor | string | undefined | Dynamic border color on hover |

CapsuleShape

Two stacked capsule halves forming a symmetrical shape.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 39.43 | Width of the shape in pixels | | height | number | 39.43 | Height of the shape in pixels | | color | string | '#2D94BE' | Fill color of the shape | | strokeColor | string | 'black' | Border color of the shape | | strokeWidth | number | 3 | Border thickness | | zIndex | number | 377 | Z-index of the container | | hoverColor | string | undefined | Dynamic background fill color on hover | | hoverStrokeColor | string | undefined | Dynamic border color on hover |

WindowGridShape

A four-pane window shape.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 39.43 | Width of the shape in pixels | | height | number | 39.43 | Height of the shape in pixels | | color | string | '#DF5751' | Fill color of the shape | | strokeColor | string | 'black' | Border color of the shape | | strokeWidth | number | 3 | Border thickness | | zIndex | number | 382 | Z-index of the container | | hoverColor | string | undefined | Dynamic background fill color on hover | | hoverStrokeColor | string | undefined | Dynamic border color on hover |

LayerCakeShape

Three stacked ellipses resembling a layer cake.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 39.43 | Width of the shape in pixels | | height | number | 39.43 | Height of the shape in pixels | | color | string | '#FFBF00' | Fill color of the shape | | strokeColor | string | 'black' | Border color of the shape | | strokeWidth | number | 3 | Border thickness | | zIndex | number | 387 | Z-index of the container | | hoverColor | string | undefined | Dynamic background fill color on hover | | hoverStrokeColor | string | undefined | Dynamic border color on hover |

WavyBadgeShape

A wavy, circular badge shape. Perfect for achievements or profile pictures.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 62.22 | Width of the shape in pixels | | height | number | 62.91 | Height of the shape in pixels | | color | string | 'black' | Fill color of the shape | | strokeColor | string | 'white' | Border color of the shape | | strokeWidth | number | 5 | Border thickness | | zIndex | number | 305 | Z-index of the container | | text | string | undefined | Text to display over the shape | | textColor | string | 'white' | Color of the text overlay | | fontSize | string \| number | undefined | Font size of the overlay text (e.g., '14px', '1.2rem') | | fontFamily | string | undefined | Font family of the overlay text (e.g., 'Inter', 'font-qomra') | | hoverColor | string | undefined | Dynamic background fill color on hover | | hoverStrokeColor | string | undefined | Dynamic border color on hover | | hoverTextColor | string | undefined | Dynamic overlay text color on hover |

StarBurstShape

A spiky starburst shape. Great for alerts, notifications, or highlights.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 114 | Width of the shape in pixels | | height | number | 114 | Height of the shape in pixels | | color | string | 'white' | Fill color of the shape | | strokeColor | string | 'none' | Border color of the shape | | strokeWidth | number | 0 | Border thickness | | zIndex | number | 426 | Z-index of the container | | text | string | undefined | Text to display over the shape | | textColor | string | 'black' | Color of the text overlay | | fontSize | string \| number | undefined | Font size of the overlay text (e.g., '14px', '1.2rem') | | fontFamily | string | undefined | Font family of the overlay text (e.g., 'Inter', 'font-qomra') | | hoverColor | string | undefined | Dynamic background fill color on hover | | hoverStrokeColor | string | undefined | Dynamic border color on hover | | hoverTextColor | string | undefined | Dynamic overlay text color on hover |

Social Shapes

A collection of clean, customizable social media brand icon shapes.

InstagramShape

An Instagram logo brand shape.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 24 | Width of the shape in pixels | | height | number | 24 | Height of the shape in pixels | | color | string | 'white' | Fill color of the icon | | zIndex | number | undefined | Z-index of the container | | hoverColor | string | undefined | Dynamic fill color of the icon on hover |

BehanceShape

A Behance logo brand shape.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 24 | Width of the shape in pixels | | height | number | 24 | Height of the shape in pixels | | color | string | 'white' | Fill color of the icon | | zIndex | number | undefined | Z-index of the container | | hoverColor | string | undefined | Dynamic fill color of the icon on hover |

DribbbleShape

A Dribbble logo brand shape.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 24 | Width of the shape in pixels | | height | number | 24 | Height of the shape in pixels | | color | string | 'white' | Fill color of the icon | | zIndex | number | undefined | Z-index of the container | | hoverColor | string | undefined | Dynamic fill color of the icon on hover |

LinkedInShape

A LinkedIn logo brand shape.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 24 | Width of the shape in pixels | | height | number | 24 | Height of the shape in pixels | | color | string | 'white' | Fill color of the icon | | zIndex | number | undefined | Z-index of the container | | hoverColor | string | undefined | Dynamic fill color of the icon on hover |

FacebookShape

A Facebook logo brand shape.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 24 | Width of the shape in pixels | | height | number | 24 | Height of the shape in pixels | | color | string | 'white' | Fill color of the icon | | zIndex | number | undefined | Z-index of the container | | hoverColor | string | undefined | Dynamic fill color of the icon on hover |

WhatsAppShape

A WhatsApp chat bubble logo brand shape.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 24 | Width of the shape in pixels | | height | number | 24 | Height of the shape in pixels | | color | string | 'white' | Fill color of the icon | | zIndex | number | undefined | Z-index of the container | | hoverColor | string | undefined | Dynamic fill color of the icon on hover |