Skip to content

Introduction Installation Change logs

Color Typography Iconography Spacing & Radius Effects

Accordion Activity Feed

Avatar Avatar Group

Badge Status Badge Tags

Banner Breadcrumb

Button Button Group Compact Button Fancy Button Text Button

Checkbox Color Picker Command Menu Content Divider Date Picker Drawer Dropdown File Upload

Alerts Notification Toast Tooltip

Text Input Digit/Pin Input Text area

Keyboard Display Message Modal Overlay Pagination Popover Progress Bar Radio Rating Rich Text Editor Segmented Control Slider Skeleton Loader Step Indicator Table Tabs Time Picker Toggle

//

Effects

Effects in Spiral help convey depth, interactivity and focus — all while keeping things accessible and performance-friendly. This section includes shadows, focus rings, and background blurs, each designed to scale across themes and screen types.

Shadows

Shadow-xs

Shadow-sm

Shadow-md

Shadow-lg

Shadow-xl

Shadow-xxl

Focus Ring

Focus-active

Focus-grey

Focus-success

Focus-error

Background Blur

White Background

Blur-sm

Blur-md

Blur-lg

Black Background

Blur-sm

Blur-md

Blur-lg

Table of content

Shadow Focus ring Background blur