Components

Browse, preview, and learn how to use each UI component.

Navigation

Tabs

A tabbed interface for organizing content into switchable panels.

1

Install

bun add semajsx
2

Build

Create app

Steps

A numbered step list for tutorials, walkthroughs, and sequential instructions.

Forms

Input

A text input field with optional label and multiple size variants.

Switch

A toggle switch for boolean settings and preferences.

Layout

Card Title

A brief description

Card

A content container with feature and link variants for organizing information.

Above
Below

Separator

A visual divider to separate content sections horizontally or vertically.

Data Display

DefaultSuccessWarning

Badge

Small labels for status indicators, tags, and category labels.

Avatar

Displays a user avatar with image support or initials fallback.

Cmd+K

Kbd

Displays keyboard keys and shortcuts with a native key-cap appearance.

const x = 42;

CodeBlock

Code display component with language labels and syntax highlighting support.

Feedback

Informational callout

Callout

Alert-style callout boxes for tips, warnings, errors, and informational content.

Actions

Button

A versatile button component with multiple variants, sizes, and color schemes.