Viber Kit — Component Library

Typography

The quick brown fox

Jumps over the lazy dog

Large medium text for intros and lead paragraphs.

Secondary text color for supporting copy and descriptions.

npm run dev

const greeting = "Hello, World!";

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

Buttons

Primary

Secondary

Subtle

Ghost

Danger

Loading

Disabled

Small

Medium

Large

Stats

Data Display

Project Atlas A hoverable elevated card with header, body, and footer slots. Lift on hover.

View

Active

A library of vanilla web components with no build step.

Components read CSS custom properties, so a single :root override restyles everything. Light and dark modes are built in.

Components ship with ARIA roles, keyboard navigation, and focus management.

Charts

Bar — Revenue vs. Returns

Line — Active users

Area — Sessions

Pie — Traffic sources

Feedback

Heads up — this is an informational message.

Saved. Your changes were stored successfully.

Your trial ends in 3 days.

Something went wrong while saving.

New

Online

Pending

3

Beta

Draft

Hover me

Navigation

Preview content with the new pill tabs.

console.log('hello');

Settings panel.

Forms

Subscribe

Monthly

Yearly

Notifications

Submit

Overlay

Open Modal

Open Drawer

Open Popover

Popover content here, anchored to the trigger.

Show Toast

Delete project?

This action cannot be undone. This will permanently delete the project and all of its data.

Cancel

Delete

Settings

Side drawer content goes here with a smooth slide-in animation.

Media & Icons

Carousel

Chat

Chat bubbles

Hey — are we still on for the design review?

Yes! I'll share the deck in a minute.

Sounds good. Ping me when it's ready.

Will do 👍

Today

Morning! The new stat cards look much cleaner.

Thanks — leading icons fixed the layout.

Theme editor is next on my list.

Already shipped — try Random mode 🎨

Beautiful UI, straight from HTML