Skip to content
Kern
Get Kern

Components

Reusable interface elements built from Kern’s shared styles.

Alert

Default

Update available

A new version is ready. The current version will remain available until the update is installed.

Success

Changes saved

The profile has been updated successfully.

Destructive

Warning with action

JS

Review the settings

Check the configuration before continuing.

Title only

All systems are operational.

Badge

Standard

Default Secondary Destructive Outline Ghost Link

Small

Default Secondary Destructive Outline Ghost Link

Icons and status indicators

Verified View sections Active Processing

Status colors

Information Approved Pending Featured Error

Control radius

Default

Small with control radius

Default Secondary Destructive Outline Ghost Link

Button

Standard

Link button

Small

Extra small

Outline

Soft outline

Ghost

Destructive

Leading and trailing icons

Icon only

Loading

Inline badges

Corner badges

Toggle

JS

Button groups

Keyboard shortcut

Full width

Card

Standard

A clear place to start.

Bring related ideas together in one focused surface.

Large

A clear place to start.

Bring related ideas together in one focused surface.

Extra-large

A clear place to start.

Bring related ideas together in one focused surface.

Checkbox

Default

With description

Disabled

Indeterminate

JS

Invalid

Card

Group with select all

JS
Email preferences

Collapsible

Default

JS

A system that grows with the work.

Start with the essentials, then compose a distinct interface from shared elements.

Dialog

Standard, small, and destructive

JS

Publish the changes?

The latest changes will become visible to everyone with access to this project.

Enable notifications?

Receive updates when there is new activity in this project.

Delete this project?

This will permanently remove the project and its contents. This preview does not delete any data.

Disclosure

Inline arrows

How are these sections reused?

Copy the HTML into a project that imports kern-base.css and kern-ui.css through Tailwind. Replace the sample content and links.

Can the layouts be combined?

Yes. Place sections one after another inside a shared width container. Each section supplies its own vertical spacing.

What changes on smaller screens?

Columns stack in reading order. Card padding reduces to 32px on phones, while the generous layout gaps remain.

Right-aligned arrows

How are these sections reused?

Copy the HTML into a project that imports kern-base.css and kern-ui.css through Tailwind. Replace the sample content and links.

Can the layouts be combined?

Yes. Place sections one after another inside a shared width container. Each section supplies its own vertical spacing.

What changes on smaller screens?

Columns stack in reading order. Card padding reduces to 32px on phones, while the generous layout gaps remain.

Small with dividers

Can Kern be used in other projects?

Yes. Copy the Kern assets into a project, import its styles, and use the example HTML as a starting point.

Does a disclosure need JavaScript?

No. The native details and summary elements support mouse, touch, and keyboard interaction.

Can more than one item stay open?

Yes. Leave out the name attribute to allow each disclosure to open independently.

Small bordered

Can Kern be used in other projects?

Yes. Copy the Kern assets into a project, import its styles, and use the example HTML as a starting point.

Does a disclosure need JavaScript?

No. The native details and summary elements support mouse, touch, and keyboard interaction.

Can more than one item stay open?

Yes. Leave out the name attribute to allow each disclosure to open independently.

One item open at a time

Can Kern be used in other projects?

Yes. Copy the Kern assets into a project, import its styles, and use the example HTML as a starting point.

Does a disclosure need JavaScript?

No. The native details and summary elements support mouse, touch, and keyboard interaction.

How does this group behave?

Only one item stays open. A shared name on each details element lets the browser close the other items automatically.

Input

Standard

A short, recognizable name.

Small

Password

JS

Number

Choose between 1 and 99 items.

Adjust in increments of 0.5.

Read-only

This reference can be selected and copied.

Disabled

This field is currently unavailable.

Invalid

Enter a complete email address.

Success

This URL is available.

File

Choose an image from this device.

With a button

Required

An email address is required.

Fields in a grid

With a badge

Input group

Icons

Small

Prefixes and suffixes

$USD
https://

With a button

JS

Header and footer addons

Website addressEnter a domain without the protocol.

Invalid

Enter a complete email address.

Disabled

Keyboard hint

⌘ K

With a dropdown

JS

Textarea with a footer action

Up to 280 characters

Loading

Searching…
Processing…
Saving…
Please wait…

Item

Standard

Account details

An item with supporting content and a trailing action.

Profile verification complete

Appearance

Default

An unframed row for everyday content.

Outline

A border separates the item from its surroundings.

Surface

A filled background gives the row more emphasis.

Sizes

Standard

Room for primary and supporting content.

Small

Tighter spacing for a compact list.

Extra small

A dense row for menus and short lists.

With an icon

Unrecognized sign-in

A new device recently accessed this account.

With an avatar

Alex Morgan

Active earlier this week

Workspace members

Bring collaborators into the workspace.

With an image

Group

  • Alex Morgan

    alex@example.com

  • Sam Rivera

    sam@example.com

  • Jamie Chen

    jamie@example.com

In a dropdown

JS

Kbd

Standard

⌘ ⇧ ⌥ ⌃ Ctrl Esc Enter K

Group

⌘ ⇧ K CtrlB

Press Ctrl + K then Ctrl + C to comment the selection.

In a button

In an input group

Pagination

Standard

Small

Numbers only

Icons only

Page 2 of 10

First page

Last page

Popover

Standard

JS

Placement

JS

With a form

JS

Open on hover

JS

Progress

Standard

33%

With a label

66%

Values

0%
25%
75%
100%

Sizes

50%
50%
50%

Colors

45%
100%
60%

Indeterminate

Processing

Calculating the remaining work…

Radio group

Standard

Density

With descriptions

Density

Choice cards

Workspace plan

In a fieldset

Billing frequency

Choose how often the subscription renews.

Disabled

Availability
Unavailable group

Invalid

Delivery method

Choose a delivery method to continue.

Horizontal

Alignment

Segmented control

Standard

JS

Small

JS

Standard fully rounded

JS

Small fully rounded

JS

Tab panels

JS

Overview

A clear view of the project, its priorities, and what comes next.

Underline

JS

Overview

A clear view of the project, its priorities, and what comes next.

Vertical

JS

Overview

A clear view of the project, its priorities, and what comes next.

Select

Standard

Small

With a description

Choose the team responsible for this project.

Grouped options

Disabled

Invalid

Choose a department to continue.

Horizontal

With a button

Multiple selection

Select one or more teams using the platform’s multiple-selection controls.

Separator

Horizontal

Kern

A considered starting point for brands and interfaces.

Shared typography, colors, and components bring consistency to each page.

Vertical

In a menu

In a list

Plan
Team
Members
12
Billing
Monthly

Shimmer

Standard

Thinking…Preparing the next responseReviewing the project

In a status line

Processing the latest updates…

Play once

The response is ready.

Disabled

The effect is switched off.Animated on mobile, static on larger screens.

Skeleton

Text

Loading article…

Avatar

Loading profile…

Form

Loading form…

Table

Loading table…

Slider

Standard

JS

Showing the value

JS

Steps

JS

Adjust in increments of 25%.

Range

JS
Price range

Multiple thumbs

JS
Breakpoints

With a description

JS
Budget

Set the minimum and maximum budget for this project.

Vertical

JS

Disabled

Switch

Standard

Small

Large

With a description

Choice cards

Settings group

Notifications

Choose which updates to receive.

Disabled

Invalid

The setting could not be saved. Try again.

Table

Standard

Recent invoices
Invoice Status Method Amount
K-101 Paid Card $125.00
K-102 Pending Bank transfer $240.00
K-103 Paid Card $360.00

Less padding

Recent invoices
Invoice Status Method Amount
K-101 Paid Card $125.00
K-102 Pending Bank transfer $240.00
K-103 Paid Card $360.00

More padding

Recent invoices
Invoice Status Method Amount
K-101 Paid Card $125.00
K-102 Pending Bank transfer $240.00
K-103 Paid Card $360.00

Striped rows

Recent invoices
Invoice Status Method Amount
K-101 Paid Card $125.00
K-102 Pending Bank transfer $240.00
K-103 Paid Card $360.00

Selected rows

JS
Select invoices for a bulk action
Invoice Status Amount
K-101 Paid $125.00
K-102 Pending $240.00
K-103 Paid $360.00

Row actions

JS
Workspace members
Member Role Actions
Alex Morgan Owner
Sam Rivera Editor
Jamie Chen Viewer

Textarea

Standard

With a label

Share a question, an idea, or a little feedback.

Disabled

Read only

Invalid

Enter a message before continuing.

With a button

Toast

Notifications

JS

Tooltip

Standard

JS

Placement

JS

With a keyboard shortcut

JS

Disabled button

JS