Elementix

A Radix-like Web Components design system built with TypeScript

Button

Primary Secondary Danger Ghost
Small Medium Large

Input

Checkbox & Switch

Unchecked Checked Disabled
Off On

Radio

Option A Option B Option C

Badge

Default Success Warning Danger

Avatar

Card

Card Title

This is the card content. Cards can contain any elements.

Action

Alert

This is an info alert. This is a success alert. This is a warning alert. This is a danger alert.

Dialog

Open Dialog

Dialog Title

This is a modal dialog. Press Escape or click outside to close.

Close

Tabs

Content for first tab Content for second tab Content for third tab

Tooltip

Top Right Bottom Left

Select

Separator

Content above

Content below

Left Right

Accordion

Content for section 1. Only one section can be open at a time in single mode. Content for section 2. Click the header to expand. Content for section 3. Keyboard navigation works with Arrow Up/Down.

Text

Heading 1 Heading 2 Heading 3 Heading 4 This is a paragraph with default styling. This is muted text for secondary content. This is success text. This is danger text. Bold span text Small muted text for captions