UI Components

AD

New UI Components

Atlas 0.1.0 - Avatar, Badge, BentoGrid, Carousel, Slider & more

Avatar & Avatar Group

Sizes & Status

XS
SM
MD
LG
XL

Avatar Group (stacked)

AB
CD
EF
GH
+5

Badge

Variants

Default Primary Success Warning Destructive Outline

With Pulse & Dot

Online 3 Errors

Bento Grid

Modern bento-box style grid layout with responsive sizing

Featured

Bento Layout

Flexible grid system with spanning cells

2x2 span
Analytics
Favorites

Wide Card (2x1)

Horizontal spanning

Slider

Toggle Group

View Mode

Text Align

Breadcrumb

Pagination

Page of 5

Collapsible / Accordion

Atlas is a modern UI component library with headless accessibility-focused components and beautiful glass-morphism styles.
Install the packages with npm/pnpm, import the styles and components, and use the data-atlas attributes on your HTML elements.
Yes! All components follow WAI-ARIA guidelines and support keyboard navigation, screen readers, and focus management.

Modal & Drawer

Tabs

Overview Content

This is the overview tab panel. Tab components support keyboard navigation with arrow keys.

Analytics Content

View your analytics data here. Charts and metrics would go in this panel.

Settings Content

Configure your preferences and account settings in this tab.

Date Picker

—
December 2024
Mo
Tu
We
Th
Fr
Sa
Su
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Hover Card

Hover over the items to see preview cards

JD
John Doe
@johndoe
AS
Alice Smith
@alicesmith

Context Menu

Right-click on the area below to see a custom context menu

Right-click here

Toast Notifications

Stackable notification toasts with different types

import { createToastManager } from '@casoon/atlas-components';
const toasts = createToastManager({ position: 'bottom-right' });
toasts.success('File saved successfully!');

Input OTP

One-time password input with auto-focus and paste support

-

Try pasting: 123456

import { createInputOtp } from '@casoon/atlas-components';
createInputOtp('#otp-input', { length: 6, onComplete: (code) => verify(code) });

Resizable Panels

Drag the divider to resize panels

Left Panel
Right Panel
import { createResizable } from '@casoon/atlas-components';
createResizable('#container', { direction: 'horizontal', minSize: 100 });

Scroll Area

Custom scrollbar styling with smooth scrolling

Item 1
Description for first item
Item 2
Description for second item
Item 3
Description for third item
Item 4
Description for fourth item
Item 5
Description for fifth item
Item 6
Description for sixth item
Item 7
Description for seventh item

Progress Indicators

75%
50%
100%