Aftershade UI

Checkbox Components

11 professional checkbox variants with subtle GSAP animations. Built for SaaS, dashboards, and enterprise apps.

11 Variants
CLI Install
Accessible
Indeterminate State

All Variants

Fast, subtle animations (100–250ms). Clear states. Good focus + keyboard support. Works in lists, tables, forms.

Liquid Fill 💧

Water fill with bubbles

Clean Check Draw

Stripe / Notion vibes

Fill + Check Reveal

Modern, clear state

Soft Toggle

Friendly, modern SaaS

Indeterminate State

Select all patterns

Focus Ring

Accessible, enterprise-grade

Subtle Pulse

Premium polish

Minimal Morph

Calm, serious apps

01

Liquid Fill 💧

Water-fill effect with clipPath animation. Rising bubbles float upward with randomized paths. Squish physics compresses the box before fill. Drain animation on uncheck.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/liquid-checkbox.json
02

Clean Check Draw

Classic pro. Box outline stays, checkmark draws with stroke animation, subtle scale. Stripe/Notion vibes.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/clean-checkbox.json
03

Fill + Check Reveal

Box fills with brand color, checkmark fades/slides in, tiny bounce on completion. Modern, clear state change.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/fill-checkbox.json
04

Soft Toggle

Box rounds more when checked, background transitions, checkmark appears with fade + scale. Friendly, modern SaaS.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/soft-toggle-checkbox.json
05

Indeterminate State

Third state shows a dash instead of check. Dash slides in horizontally. Perfect for 'Select all' patterns.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/indeterminate-checkbox.json
06

Focus Ring

On focus: animated ring expands around checkbox. On check: ring settles + check draws in. Accessible, enterprise-grade.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/focus-ring-checkbox.json
07

Subtle Success Pulse

When checked: checkbox briefly pulses, faint glow expands and fades. Very subtle, not flashy. Premium polish.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/pulse-checkbox.json
08

List Selection

Checking animates row background highlight and check draws in. Uncheck reverses smoothly. Table/dashboard quality UX.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/list-selection-checkbox.json
09

Card Selection

Checkbox in corner of a card. On check: card lifts, border highlights, checkmark appears. Figma/Notion style.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/card-selection-checkbox.json
10

Smart Group

Select all checkbox with children. Checked → all children animate in sequence. Indeterminate → dash animates in. Enterprise tables.

Permissions
Read
Write
Delete
Admin

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/smart-group-checkbox.json
11

Minimal Morph

Box morphs slightly (radius change), checkmark scales from 0.8 → 1. Very restrained animation. Calm, serious, pro apps.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/minimal-morph-checkbox.json

What Makes a Checkbox "Professional"

Fast & Subtle

Animations between 100–250ms. No flashy or distracting motion.

Clear States

Checked, unchecked, and indeterminate states are visually distinct.

Accessible

Full keyboard navigation, focus states, and ARIA attributes.

Works Everywhere

Lists, tables, cards, forms, settings panels.

GSAP Powered

Stroke animations, stagger effects, synchronized row highlights.

Light & Dark

All variants work seamlessly in both light and dark modes.