Skwircle Components

Interactive showcase of Skwircle UI components.

Skwircle

iOS-style squircle components

Skwircle

iOS-style superellipse container with SVG borders

Roundness Variants

none
none
subtle
subtle
moderate
moderate
rounded
rounded
pill
pill

Elevation Variants

none
none
xs
xs
sm
sm

Card

Container component with elevation and padding

Basic Card

Card Title

This is a basic card with some content inside.

Elevations

none
xs
sm

With Rich Content

John Doe

Product Designer

Building beautiful interfaces with Skwircle components.

Button

Interactive button with multiple hierarchies

Hierarchy

Primary
Secondary
Tertiary
Link

Sizes

Small
Medium
Large
XL

With Icons

Home
Settings

States

Default
Disabled
Loading

Badge

Status indicators and labels

Colors

Gray
Brand
Error
Warning
Success
Blue
Indigo
Purple
Orange

Sizes

Small
Medium
Large

Types

Badge
Pill
Modern

With Icons

Success
Warning
Info

With Dot

Online
Away
Offline

SearchInput

Skwircle-based search field with clear button

Sizes

Interactive

Accordion

Expandable sections with animated L-shaped lines

Accordion

Expandable sections with animated L-shaped lines

Default Preset

Comfortable Preset

Interactive

Animated expanding components

ExpandingFilterChip

Filter chip that expands to reveal value and close button

FilterChip (Recommended)

Uses icons by default with all styling applied automatically

Active
Sales

Small Preset

Active
Featured

With Labels (no icons)

Status:
Active
Category:
Sales

All Sizes

XS
SM
Default
MD
LG

With Icons (default)

Active
Featured
John Doe

Click to Expand

Click the collapsed chips to expand them

Pending
Invoice
Home

AddFilterMenu

Filter selection dropdown with submenu navigation

Default Filter Menu

Features

  • • Animated reveal on open
  • • Submenu navigation with slide transitions
  • • Height animation between menu levels
  • • Opacity crossfade effects

RevealMenu

Animated dropdown menu with reveal animation

Icon Trigger Menu

Click the icon to open menu

Positions

Bottom-Start
Bottom-End
Right-Start

Features

  • • Scale + opacity reveal animation
  • • Submenu navigation with back button
  • • Keyboard navigation support
  • • Customizable appearance (shine, shadow, radius)