Terminal 1

Danger alert

Success alert

Warning alert

t1-alert

Alert

Inline alert and toast notifications with 5 variants, closable, auto-hide duration, and icon slot.

AB

JD

👤

t1-avatar

Avatar

User avatar with image, initials fallback, icon slot, and circle/rounded/square shapes.

New Done 3

t1-badge

Badge

Small status and count indicators with multiple variants, pill shape, and pulse animation.

Primary Default

t1-button

Button

Multi-variant button with sizes, pill/circle modes, loading state, and prefix/suffix slots.

Header

Body content

Footer

t1-card

Card

Flexible container with image, header, body, and footer slots. CSS custom properties for border and padding.

Actions ▼

Cut

Copy

t1-dropdown

Dropdown

Trigger-based dropdown panel with placement, stay-open-on-select, and keyboard dismissal.

January 1, 2026 Thursday · 12:00 AM UTC

t1-format-date

Format Date

Locale-aware date/time formatter using Intl.DateTimeFormat with all standard options.

$1,234.56 75% 1,000,000

t1-format-number

Format Number

Locale-aware number formatter using Intl.NumberFormat with currency, percent, and decimal modes.

◆ ◆ ◆

t1-icon

Icon

SVG icon component with library registration, custom sources, and sprite sheet support.

⚙ ✐

t1-icon-button

Icon Button

Icon-only button with accessible label, sizing via font-size, and link mode.

Enter text...

t1-input

Input

Form-associated text input with labels, help text, clearable, and password toggle.

Cut

Copy

Paste

t1-menu

Menu

Accessible menu container with keyboard navigation and t1-select event.

Normal item

✓ Checkbox

t1-menu-item

Menu Item

Individual menu item with checkbox, loading, disabled states, and prefix/suffix slots.

Popup content

Anchor

t1-popup

Popup

Floating UI-powered positioned popup with placement, arrow, and flip/shift/size middleware.

★ ★ ★ ★ ★

t1-rating

Rating

Interactive star rating with precision, read-only/disabled states, keyboard support, and custom symbols.

Pick one… ▼

t1-select

Select

Single and multi-value select with tags, clearable, keyboard navigation, and form association.

Option 1

✓ Option 2

Option 3

t1-option

Option

Selectable item for use inside t1-select, with disabled state and prefix/suffix slots.

t1-skeleton

Skeleton

Loading placeholder with pulse, sheen, and none effects. Fully customizable shape via CSS custom properties.

t1-spinner

Spinner

Animated loading indicator with configurable track width and color.

Primary Success Warning Danger

t1-tag

Tag

Compact label with variant colors, sizes, pill style, and optional remove button.

Tooltip text

Hover Me

t1-tooltip

Tooltip

Floating tooltip with hover/focus/click triggers, all placement options, and disabled state.