WhiteSur

A macOS-inspired Bootstrap 5 theme with a complete set of matching elements — frosted glass surfaces, generous radii, and vibrancy.

Navbar

Buttons & Button Groups

Contextual variants

Outline variants

Sizes & states

Button groups & segmented control

Typography

h1. The quick brown fox

h2. Jumps over the lazy dog

h3. Pack my box with five dozen

h4. Dozens of liquor jugs

h5. How vexingly quick daft zebras
h6. Jump!

A lead paragraph set at a larger size for introductory content.

Body copy uses the San Francisco system font stack at 15px with a 1.5 line height and slightly tightened tracking, echoing macOS Sonoma.

Inline elements like links, bold text, emphasis, inline code, ⌘ + K and highlighted text all follow the system palette.

Secondary text is used for supporting copy and metadata.

Small print, footnotes and legal text.

Display headings

Display 6

Display 5

Blockquote

Design is not just what it looks like and feels like. Design is how it works.

Steve Jobs

Lists

  • Translucent window chrome with backdrop blur
  • Rounded, pill-shaped controls throughout
  • Full light and dark mode parity

Tables

Files & folders
Name Kind Size Status
DocumentsFolder— Open
Wallpaper.tiffImage48.2 MB Synced
Theme.cssStylesheet24 KB Modified
Archive.zipArchive112 MB Locked
Variant Light Dark
Accent#007aff#0a84ff
Surface#ffffff#1c1c1e
Label#1d1d1f#f5f5f7

Forms

We'll never share your address.
Name is available.
Slugs cannot contain spaces.

Search & input groups

@
$ .00

Checks, radios & switches

Range

Floating labels

Navs & Tabs

General settings panel.
Display settings panel.
Storage settings panel.
You should not see this.

Segmented

Pills & underline

Breadcrumbs

Pagination

Alerts

Badges

Primary Secondary Success Danger Warning Info Light Dark Pill Solid
Inbox 12+ Draft

Progress & Spinners

Basic & contextual

Striped & animated

Stacked

Spinners

List Groups

Default & active

  • Favorites
  • Recents
  • Shared
  • Trash

Linked & actions

Dock Desktop Documents

Custom (primary)

  • Primary item
  • Another primary item

Flush

  • Flush item
  • Flush item

Inset (settings style)

  • Wi-Fi
  • Bluetooth
  • Network

Cards

Basic

A plain card with a body.

Action
Primary

Contextual card.

Action
Success

Contextual card.

Glass

Vibrancy card with backdrop blur.

Bordered
Primary border

Cards support all contextual border colours.

Updated 2 minutes ago
Header, image cap & footer

Cards compose cleanly with image caps.

Retina display
Card with list group
Widgets
Wallpaper
Accessibility
Last synced moments ago.

Accordions

Default

macOS controls use generous radii, which makes interfaces feel soft and approachable.

Translucent chrome with backdrop-filter replicates the blur seen in Finder and System Settings.

Every component has a hand-tuned dark palette, not just an inverted filter.

Flush

Flush variant removes the outer border.

Each item is styled as a rounded card.

Carousel

Modals

Offcanvas

Sidebar
  • Favorites
  • Recents
  • Shared
Inspector
Panel content goes here.
Toolbar
A top drawer, handy for filters.

Popovers & Tooltips

Hover me

Toasts

Placeholders

Misc

Close buttons

Standalone dropdowns

Dark mode note

Toggle data-bs-theme on the <html> element to see every component re-tuned for dark mode.