Squircle

https://squircle.skyleen.dev/docs
Admin
Squircle is a CSS-based library for creating customizable, smooth squircles with ease using CSS...
Tokens:4,870
Snippets:52
Trust Score:5.1
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install Squircle Tailwind CSS Plugin

Source: https://squircle.skyleen.dev/docs/getting-started

Installs the Squircle plugin for Tailwind CSS. This integrates Squircle's utility classes into your Tailwind project.

```bash
npm install @squircle/tailwindcss
```

--------------------------------

### Install Squircle Core and Paint Polyfill

Source: https://squircle.skyleen.dev/docs/getting-started

Installs the necessary Squircle core library and a paint polyfill for broader browser compatibility. This is a prerequisite for using Squircle.

```bash
npm install @squircle/core @squircle/paint-polyfill
```

--------------------------------

### Initialize Squircle Core

Source: https://squircle.skyleen.dev/docs/getting-started

Calls the `init` function to initialize the Squircle core functionality. This should be done once before using Squircle components.

```javascript
init();
```

--------------------------------

### Import Squircle Core Initialization

Source: https://squircle.skyleen.dev/docs/getting-started

Imports the `init` function from the Squircle core library. This function is required to set up Squircle's functionality.

```javascript
import { init } from '@squircle/core';
```

--------------------------------

### Squircle Tailwind CSS Usage

Source: https://squircle.skyleen.dev/docs/getting-started

Applies Squircle styling using Tailwind CSS utility classes. This example shows how to apply a base squircle class along with size and color variants.

```html
<div class="squircle squircle-2xl squircle-teal-400" />
```

--------------------------------

### Wrap App with SquircleProvider in React

Source: https://squircle.skyleen.dev/docs/getting-started

Demonstrates how to wrap the main application component with `SquircleProvider` to enable Squircle functionality across the React app.

```javascript
<SquircleProvider>
  <App />
</SquircleProvider>
```

--------------------------------

### Import Squircle Tailwind CSS

Source: https://squircle.skyleen.dev/docs/getting-started

Imports the Squircle Tailwind CSS plugin into your global CSS file. This makes Squircle's utility classes available.

```css
@import '@squircle/tailwindcss';
```

--------------------------------

### Initialize Squircle in React

Source: https://squircle.skyleen.dev/docs/getting-started

Initializes Squircle within a React application using a provider component. It utilizes `useEffect` to ensure initialization happens after the component mounts.

```javascript
'use client';

import * as React from 'react';
import { init } from '@squircle/core';

export function SquircleProvider({ children }: { children: React.ReactNode }) {
  React.useEffect(() => void init(), []);
  return children;
}
```

--------------------------------

### Squircle CSS Usage

Source: https://squircle.skyleen.dev/docs/getting-started

Applies Squircle styling using plain CSS. It uses the `paint(squircle)` function and custom properties for background, border color, width, and radius.

```css
.squircle {
  background: paint(squircle);
  --squircle-background-color: red;
  --squircle-border-color: blue;
  --squircle-border-width: 10px;
  --squircle-border-radius: 30px;
}
```

--------------------------------

### Apply Squircle Mask Image - CSS

Source: https://squircle.skyleen.dev/docs/css/mask-image

Applies a squircle mask to an element using the CSS paint API. It sets the mask-image property to `paint(squircle)` and defines the `--squircle-mode` variable. This example is intended for browsers supporting the CSS paint API.

```css
.squircle {
  mask-image: paint(squircle);
  --squircle-mode: mask-image;
}
```

--------------------------------

### HTML Structure for Squircle Background

Source: https://squircle.skyleen.dev/docs/tailwindcss/background

This snippet shows the basic HTML structure required to apply the squircle background. A simple div element with the 'squircle' class is sufficient.

```html
<div class="squircle"></div>
```

--------------------------------

### Apply Squircle Background using CSS

Source: https://squircle.skyleen.dev/docs/tailwindcss/background

This snippet demonstrates how to apply a squircle background to an HTML element using the CSS 'paint(squircle)' property. It also shows how to customize the squircle's shape and appearance using various CSS variables.

```css
.squircle {
  background: paint(squircle);
  --squircle-border-radius: 0;
  --squircle-border-top-left-radius: 0;
  --squircle-border-top-right-radius: 0;
  --squircle-border-bottom-right-radius: 0;
  --squircle-border-bottom-left-radius: 0;
  --squircle-border-smoothing: 0.6;
  --squircle-border-top-left-smoothing: 0.6;
  --squircle-border-top-right-smoothing: 0.6;
  --squircle-border-bottom-right-smoothing: 0.6;
  --squircle-border-bottom-left-smoothing: 0.6;
  --squircle-border-width: 0;
  --squircle-border-color: unset;
  --squircle-background-color: unset;
  --squircle-mode: background;
}

@supports not (background: paint(squircle)) {
  .squircle {
    background-repeat: no-repeat;
  }
}
```

--------------------------------

### Squircle Component Usage with Predefined Sizes

Source: https://squircle.skyleen.dev/docs/tailwindcss/border-radius

Demonstrates how to apply squircle styling to a div element using predefined CSS classes for border-radius. Assumes the necessary CSS variables are defined.

```html
<div className="squircle-xl" />
```

--------------------------------

### Apply Global Squircle Border Smoothing (CSS)

Source: https://squircle.skyleen.dev/docs/css/border-smoothing

This CSS snippet demonstrates how to apply a global border smoothing effect to a squircle element using the `--squircle-border-smoothing` variable. The variable accepts a number between 0.2 and 1 for optimal results. No external dependencies are required, as this is a standard CSS property.

```css
.squircle {
  --squircle-border-smoothing: 0.5;
}
```

--------------------------------

### Apply Squircle Background with CSS Paint API

Source: https://squircle.skyleen.dev/docs/css/background

Applies a squircle background to an element using the CSS paint API. The default mode is 'background'. It's recommended to use 'no-repeat' for compatibility with browsers not supporting CSS.paintWorklet.

```css
.squircle {
  background: paint(squircle);
}
```

```css
.squircle {
  background: paint(squircle);

  @supports not (background: paint(squircle)) {
    background-repeat: no-repeat;
  }
}
```

--------------------------------

### Set Squircle Border Width using PX

Source: https://squircle.skyleen.dev/docs/css/border-width

Demonstrates how to set the border width of a squircle element to a specific pixel value using the --squircle-border-width CSS variable. This method ensures a precise border size.

```css
.squircle {
  --squircle-border-width: 2px;
}
```

--------------------------------

### Squircle Mask with No-Repeat Fallback - CSS

Source: https://squircle.skyleen.dev/docs/css/mask-image

Applies a squircle mask to an element and includes a fallback for browsers not compatible with `CSS.paintWorklet`. It uses `mask-repeat: no-repeat;` within an `@supports` query to prevent potential visual bugs on slow devices during resizing.

```css
.squircle {
  mask-image: paint(squircle);
  --squircle-mode: mask-image;

  @supports not (mask-image: paint(squircle)) {
    mask-repeat: no-repeat;
  }
}
```

--------------------------------

### Applying Squircle Smoothing Classes in HTML

Source: https://squircle.skyleen.dev/docs/tailwindcss/border-smoothing

Demonstrates how to apply pre-defined CSS classes to HTML div elements to achieve different squircle border smoothing effects. These classes leverage the CSS variables defined elsewhere. The input is an HTML div element with specific class names.

```html
<div className="squircle-smooth-lg" />
```

```html
<div className="squircle-smooth-tl-lg squircle-smooth-br-sm" />
```

```html
<div className="squircle-smooth-0.5" />
```

--------------------------------

### Squircle Component Usage with Custom Pixel Radius

Source: https://squircle.skyleen.dev/docs/tailwindcss/border-radius

Illustrates applying a custom pixel radius to a squircle element using a numerical class name. This provides flexibility beyond the predefined sizes.

```html
<div className="squircle-20" />
```

--------------------------------

### Set Squircle Border Width using Number

Source: https://squircle.skyleen.dev/docs/css/border-width

Illustrates setting the squircle border width using a unitless number. This approach also defines the border width, often interpreted in pixels by default in some contexts.

```css
.squircle {
  --squircle-border-width: 2;
}
```

--------------------------------

### Apply Per-Corner Squircle Border Smoothing (CSS)

Source: https://squircle.skyleen.dev/docs/css/border-smoothing

This CSS snippet shows how to customize the border smoothing for each corner of a squircle independently. It utilizes specific CSS variables like `--squircle-border-top-left-smoothing` and others. The values should be numbers between 0.2 and 1. This allows for fine-grained control over the squircle's appearance.

```css
.squircle {
  --squircle-border-top-left-smoothing: 0.2;
  --squircle-border-top-right-smoothing: 0.4;
  --squircle-border-bottom-right-smoothing: 0.6;
  --squircle-border-bottom-left-smoothing: 0.8;
}
```

--------------------------------

### Squircle Component Usage with Individual Corner Customization

Source: https://squircle.skyleen.dev/docs/tailwindcss/border-radius

Shows how to customize specific corners of a squircle element by combining different predefined CSS classes. This allows for asymmetrical squircle shapes.

```html
<div className="squircle-tl-xl squircle-br-md" />
```

--------------------------------

### Customize Squircle Border Color Opacity

Source: https://squircle.skyleen.dev/docs/tailwindcss/border-color

Allows customization of the border color's opacity for a squircle component. Opacity can be set using a slash notation followed by a value between 0 and 100 (or corresponding Tailwind opacity scale).

```html
<div className="squircle-border-red-500/50" />
```

--------------------------------

### Apply Squircle Mask to Element

Source: https://squircle.skyleen.dev/docs/tailwindcss/mask-image

This snippet demonstrates how to apply a squircle mask to a div element using the 'squircle-mask' CSS class. It utilizes the CSS paint API for masking. The provided styles define various properties to customize the squircle's shape and appearance.

```html
<div className="squircle-mask" />
```

```css
.squircle-mask {
  mask-image: paint(squircle);
  --squircle-border-radius: 0;
  --squircle-border-top-left-radius: 0;
  --squircle-border-top-right-radius: 0;
  --squircle-border-bottom-right-radius: 0;
  --squircle-border-bottom-left-radius: 0;
  --squircle-border-smoothing: 0.6;
  --squircle-border-top-left-smoothing: 0.6;
  --squircle-border-top-right-smoothing: 0.6;
  --squircle-border-bottom-right-smoothing: 0.6;
  --squircle-border-bottom-left-smoothing: 0.6;
  --squircle-border-width: 0;
  --squircle-border-color: unset;
  --squircle-background-color: unset;
  --squircle-mode: mask-image;

  @supports not (mask-image: paint(squircle)) {
    mask-repeat: no-repeat;
  }
}
```

--------------------------------

### Apply Custom Squircle Border Width with Utility Class

Source: https://squircle.skyleen.dev/docs/tailwindcss/border-width

Applies a custom border width to a squircle element using a utility class like 'squircle-border-4'. This class sets the '--squircle-border-width' CSS variable to a specified numeric value (e.g., '4').

```html
<div className="squircle-border-4" />
```

--------------------------------

### Apply Squircle Border Width with CSS Variable

Source: https://squircle.skyleen.dev/docs/tailwindcss/border-width

Applies a default border width to a squircle element using the 'squircle-border' class. This class sets the '--squircle-border-width' CSS variable to '1px'.

```html
<div className="squircle-border" />
```

--------------------------------

### Set Global Squircle Border Radius (CSS)

Source: https://squircle.skyleen.dev/docs/css/border-radius

This CSS snippet demonstrates how to set a uniform border radius for a squircle element using the `--squircle-border-radius` variable. The value can be specified in pixels (px) or as a unitless number. Other units like rem, em, vh, vw are not supported.

```CSS
.squircle {
  --squircle-border-radius: 10px;
}
```

```CSS
.squircle {
  --squircle-border-radius: 10;
}
```

--------------------------------

### Squircle Border Smoothing CSS Variables

Source: https://squircle.skyleen.dev/docs/tailwindcss/border-smoothing

These CSS variables define different levels of smoothing for the bottom-left border of a squircle element. They accept values between 0 and 1, where 1 represents full smoothing. No external dependencies are required.

```css
--squircle-border-bottom-left-smoothing: 0.4;
--squircle-border-bottom-left-smoothing: 0.6;
--squircle-border-bottom-left-smoothing: 0.8;
--squircle-border-bottom-left-smoothing: 1;
```

--------------------------------

### Customize Squircle Border with Tailwind CSS Color

Source: https://squircle.skyleen.dev/docs/tailwindcss/border-color

Applies a border color to a squircle component using a predefined Tailwind CSS color class. This method relies on the Tailwind CSS framework for styling. No external dependencies are required beyond Tailwind CSS.

```html
<div className="squircle-border-red-500" />
```

--------------------------------

### Set Individual Corner Squircle Border Radius (CSS)

Source: https://squircle.skyleen.dev/docs/css/border-radius

This CSS snippet shows how to customize the border radius for each corner of a squircle individually. It utilizes specific variables like `--squircle-border-top-left-radius`, `--squircle-border-top-right-radius`, `--squircle-border-bottom-right-radius`, and `--squircle-border-bottom-left-radius`. Pixel values are supported for these properties.

```CSS
.squircle {
  --squircle-border-top-left-radius: 5px;
  --squircle-border-top-right-radius: 10px;
  --squircle-border-bottom-right-radius: 15px;
  --squircle-border-bottom-left-radius: 20px;
}
```

--------------------------------

### Squircle CSS Variables for Border Bottom Left Radius

Source: https://squircle.skyleen.dev/docs/tailwindcss/border-radius

Defines CSS custom properties for squircle border-bottom-left-radius, ranging from extra-small to full. Supports pixel values only.

```css
`squircle-bl-xs`| `--squircle-border-bottom-left-radius: 2px;`  
`squircle-bl-sm`| `--squircle-border-bottom-left-radius: 4px;`  
`squircle-bl-md`| `--squircle-border-bottom-left-radius: 6px;`  
`squircle-bl-lg`| `--squircle-border-bottom-left-radius: 8px;`  
`squircle-bl-xl`| `--squircle-border-bottom-left-radius: 12px;`  
`squircle-bl-2xl`| `--squircle-border-bottom-left-radius: 16px;`  
`squircle-bl-3xl`| `--squircle-border-bottom-left-radius: 24px;`  
`squircle-bl-4xl`| `--squircle-border-bottom-left-radius: 32px;`  
`squircle-bl-5xl`| `--squircle-border-bottom-left-radius: 40px;`  
`squircle-bl-6xl`| `--squircle-border-bottom-left-radius: 50px;`  
`squircle-bl-7xl`| `--squircle-border-bottom-left-radius: 60px;`  
`squircle-bl-full`| `--squircle-border-bottom-left-radius: 9999px;`
```

--------------------------------

### Set Squircle Background Color with Tailwind CSS

Source: https://squircle.skyleen.dev/docs/tailwindcss/background-color

Demonstrates how to set the background color of a squircle element. It utilizes Tailwind CSS color classes like 'squircle-red-500' for predefined colors or allows for custom hex color values like 'squircle-[#2dd4bf]'. Opacity can also be adjusted using the '/50' syntax.

```html
<div className="squircle-red-500" />
```

```html
<div className="squircle-[#2dd4bf]" />
```

```html
<div className="squircle-red-500/50" />
```

--------------------------------

### Customize Squircle Border with Custom Hex Color

Source: https://squircle.skyleen.dev/docs/tailwindcss/border-color

Applies a border color to a squircle component using a custom hexadecimal color value. This allows for precise color control. The color value is directly embedded in the class name.

```html
<div className="squircle-border-[#2dd4bf]" />
```
Tokens:
Raw