UI · Components · User Management

Badges & status

Status pills — always paired with a label, never colour alone

Active Invited Inactive Suspended

Badges

Default Secondary Outline Destructive Success Warning Owner

Avatars

AO AO AO TB

AO TB PR +42

Alerts

Directory sync runs hourly

Changes made in Okta appear here within the hour, or immediately if you sync manually.

All admins have MFA enrolled

Policy has held at 100% for 94 consecutive days.

14 seats left on this plan

Adding beyond 1,200 seats bills at the overage rate.

6 admins are overdue recertification

Uncertified grants are revoked automatically when the review closes.

Toasts — click to fire

Cards

Total users

8,942

+4.9% vs. last month

With sparkline

8,942

With header

A header row, body, and footer separated by hairlines. This is the shape most pages in the template use.

Progress & meters

Seats in use84%

MFA enrolment78%

Recertification60%

Onboarding complete100%

Spinner

Dots

Skeleton

Dialog & dropdown

Native dialog

Disclosure menu

Actions

Tabs & accordion

Tabs are a real ARIA tablist. Focus one and use the arrow keys, Home, or End.

Panels are toggled with the hidden class, so keep other display utilities off the panel element.

The first trigger carrying border-primary becomes the initial tab.

First item

Built on native <details>, so it works with no JavaScript at all.

Second item

The chevron rotates through the group-open variant.

Third item

Add the name attribute to make a group exclusive.

Carousel

CSS scroll-snap does the sliding; the JS only adds controls

Slide 1 — Scroll snap

The track is a real scroll container, so swipe and trackpad work with no code.

Slide 2 — Keyboard

Focus the track and use the left and right arrow keys.

Slide 3 — Autoplay

Set data-autoplay to a millisecond interval. It stops on hover, focus, or any interaction.

Slide 4 — Dots

Generated from the slide count and kept in sync with scroll position.

Slide 5 — Reduced motion

Autoplay never starts, and paging jumps instead of animating.

<div data-carousel data-autoplay="6000">
  <div data-carousel-track class="no-scrollbar flex snap-x snap-mandatory gap-4 overflow-x-auto">
    <article data-carousel-slide class="shrink-0 snap-center">…</article>
  </div>
  <button data-carousel-prev>…</button>
  <button data-carousel-next>…</button>
  <div data-carousel-dots></div>
</div>