atomx

atomx component library

View Docs →

Install a component

Components are copied directly into your project — no runtime dependency.

npx shadcn@latest add https://atomx.acau.net/r/<name>.json

Form components

Quick previews of the form toolkit. See the docs for full usage and props.

Select

Checkbox

Switch

Radio Group

Form (react-hook-form)

Your public display name.

Disclosure, feedback & media

Accordion, Alert, Alert Dialog, Aspect Ratio, and Avatar. See the docs for full usage and props.

Accordion

A shadcn/ui-compatible registry. Components are copied into your project as source files you own.

Alert

Alert Dialog

Aspect Ratio

16 / 9

Avatar

CNAX

Display, navigation & layout

Badge, Breadcrumb, Separator, and Button Group. See the docs for full usage and props.

Badge

DefaultSecondaryDestructiveOutline

Breadcrumb

Separator

Components are copied into your project.
You own the code after install.
Docs
Registry
Source

Button Group

Date, media, commands & overlays

Calendar, Carousel, Chart, Collapsible, Command, Context Menu, Dialog, Popover, and Combobox. See the docs for full usage and props.

Calendar

May 2026

Carousel

Slide 1
Slide 2
Slide 3

Chart

Collapsible

Command

Context Menu

Right-click here

Dialog

Popover

Combobox

Menus, drawers, dates & direction

Dropdown Menu, Drawer, Date Picker, and Direction. See the docs for full usage and props.

Dropdown Menu

Drawer

Date Picker

Direction

StartEnd

Forms, lists & surfaces

Empty, Field, Hover Card, Input Group, Input OTP, Item, and Kbd. See the docs for full usage and props.

Empty

No messages
Your inbox is empty. Messages will appear here when you receive them.

Field

Your public display name.

Agree to the terms of service.

Hover Card

Input Group

@atomx.dev

Input OTP

Code: ––––––

Item

Profile

Manage your personal information.

Email

Notifications and digests.

Kbd

Save:SSearch:KEscape:Esc

Menubar, navigation, pagination & layout

Menubar, Native Select, Navigation Menu, Pagination, Progress, and Resizable. See the docs for full usage and props.

Menubar

Native Select

Progress

33%
66%

Navigation Menu

Pagination

Resizable (horizontal)

One
Two

Resizable (vertical)

Top
Bottom

Tabs, toggles, tooltips & toasts

Tabs, Toggle, Toggle Group, Tooltip, and Sonner. See the docs for full usage and props.

Tabs

Manage your account settings and personal information.

Toggle

Toggle Group

Tooltip

Sonner (Toast)

Typography

Taxing Laughter: The Joke Tax Chronicles

The People of the Kingdom

Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne.

“After all,” he would say, “everyone enjoys a good joke, so it's only fair that they should pay for the privilege.”
@radix-ui/react-alert-dialog

Scroll, sheets, sidebars & sliders

Scroll Area, Sheet, Sidebar, Skeleton, Slider, and Spinner. See the docs for full usage and props.

Scroll Area

Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Row 11
Row 12
Row 13
Row 14
Row 15
Row 16
Row 17
Row 18
Row 19
Row 20
Row 21
Row 22
Row 23
Row 24
Row 25
Row 26
Row 27
Row 28
Row 29
Row 30

Sheet

Skeleton

Slider

Value: 50
Range: 2080

Spinner

Loading…

Sidebar

Each preview is isolated to its own bounded container. In a real app the sidebar spans the full viewport.

Static (collapsible="none")

Offcanvas — hide on trigger

Icon — collapse to icons

Floating variant

About

atomx is a custom shadcn/ui-compatible registry. Components are distributed as source files — consumers own the code after install. Upstream updates require re-running the add command.