KappaDuck Component library

Component gallery

A single-stylesheet component system for any websites. Every component below is styled purely by kappaduck.css.

Color tokens
--quack-*
Surfaces
background
surface
elevated
sunken
Brand & feedback
primary
accent
danger
warning
Text
Primary — the quick brown fox Secondary — the quick brown fox Muted — the quick brown fox Accent — the quick brown fox
Typography & highlight
.quack-link · mark · .quack-highlight

Heading one

Heading two

Body copy in the secondary tone, legible without shouting. Here is an inline link inside a paragraph.

The pond report shows a 32% rise in ripples this quarter, with record migration and a new nesting record.

Buttons
.quack-btn
Icon buttons
.quack-icon-btn
With a text label via .quack-icon-btn-label
Spinner
.quack-spinner
Form fields
.quack-field · .quack-input · .quack-select · .quack-text-area · .quack-combox
We'll never share it.
Must be at least 8 characters.
  • Germany
  • Georgia
  • Algeria
Input group
.quack-input-group
https://
Selection
.quack-check · .quack-switch
Badges & chips
.quack-badge · .quack-chip
Default Primary Active Pending Failed
Mallard Teal Featured
Card & alerts
.quack-card · .quack-alert
Pond membership Active

Unlimited quacks, priority ripples, and a shiny gold beak badge on your profile.

Your changes were saved successfully.
Your session expires in 5 minutes.
Something went wrong. Please try again.
A neutral, informational note on the elevated surface.
Overlays
.quack-popover · .quack-dialog · .quack-menu
Quick tip Popovers use the native Popover API. Click outside to dismiss, no JavaScript required.
Delete pond?
This action can't be undone. All ripples and nesting records for this pond will be permanently removed.
Tabs
.quack-tabs · .quack-tabs-panel
Willow Bank is home to 128 ducks across three nesting zones. Ripple activity is steady this season with a small uptick in migration.
Latest events: 3 new arrivals, 1 nest relocation, and a pondside feeder refill logged 2 hours ago.
Configure notifications, membership tier, and pond visibility from here. Changes apply instantly.

The stylesheet ships .quack-tabs-panel { display: none } and leaves the show/hide to the consumer. Here it's wired with one :has() rule matching the checked radio to its panel by index.

Segmented control
.quack-segmented
Tables
.quack-table · .quack-table-wrap · .quack-table-compact
Striped, inside .quack-table-wrap (rounded frame + horizontal scroll)
Pond Ducks Region Status
Willow Bank 128 North Active
Reed Marsh 64 East Pending
Stone Creek 0 South Closed
Tighter row padding, wrapped for a rounded frame using .quack-table-compact
Pond Ducks Region Status
Willow Bank 128 North Active
Reed Marsh 64 East Pending
Stone Creek 0 South Closed
Cedar Pool 212 West Active
Toasts
.quack-toast
Saved Your pond settings were updated.
Upload failed Check your connection and retry.
Heads up Migration window opens tonight.
Progress
.quack-progress
Navigation
.quack-breadcrumb · .quack-pagination
  1. Home
  2. Ponds
  3. Willow Bank
1 2 3 ... 9
Skeleton
.quack-skeleton
Accordion
.quack-accordion
What is a pond membership?
Unlimited quacks, priority ripples, and a gold beak badge on your profile.
Can I migrate between ponds?
Migration is free once per season and keeps your nesting records.
Tooltip & divider
[data-tooltip] · .quack-divider
or continue with
Image frames
.quack-frame · .quack-gallery
.quack-frame-video (16 / 9)
.quack-frame-portrait (3 / 4)