Primitives

15 foundational UI components — the building blocks of every APPEM interface.

Button

Button

Primary action component with multiple variants, sizes, and states.

Variants
Sizes
With Icons
Loading & Arrow
Input

Input

Text input with labels, addons, error states, and size variants.

Sizes
With Addons
States

This field is required

Textarea

Textarea

Multi-line text input with auto-resize and character count.

Sizes
Auto Resize & Character Count
0/200
Error State

Too short — minimum 20 characters

Select

Select

Dropdown select with optional search filtering.

Basic
Searchable
States

Please select a role

Checkbox

Checkbox

Checkbox with label and indeterminate state support.

Basic
Indeterminate
Toggle

Toggle

On/off switch with optional label positioning.

RadioGroup

RadioGroup

Radio button group with vertical and horizontal layouts.

Vertical (Default)
Subscription Plan
Horizontal
Priority
Badge

Badge

Status indicators with color variants, sizes, and dot indicator.

Variants
BrandSuccessNeutralDangerWarning
Sizes
SmallMediumLarge
With Dot
ActiveOfflinePendingDraft
Tag

Tag

Removable tags/chips with color variants.

Variants
Blue TagGreen TagMono Tag
Removable
ReactTypeScriptTailwindNext.js
Tooltip

Tooltip

Informational popup on hover with 4 placement options.

Avatar

Avatar

User avatar with image, initials fallback, and size variants.

Sizes
Initials Fallback & Anonymous
Card

Card

Container component with elevation, border, and dark variants.

Elevated Card

Default elevated card with shadow.

Bordered Card

Flat card with border only.

Dark Card

Dark theme variant.

Alert

Alert

Contextual feedback messages with 4 semantic variants.

Dismissible
Separator

Separator

Horizontal or vertical divider with optional centered label.

Horizontal

Content above separator

Content below separator

With Label

Section A

Section B

Vertical
LeftRight
Skeleton

Skeleton

Loading placeholder with rectangle, circle, and text variants.

Rectangle
Circle
Text Lines