Component Test Page

Button (from @sugarcoat/ui-nxt)

LocalButton (simulating download)

LocalButton with css() customization

Dialog

Accordion

Form Controls (Batch 1)

Checkbox

Switch

Radio

Option 1Option 2Option 3

Input

Textarea

Overlays & Navigation (Batch 2)

Tooltip

Popover

Select

Tabs

Content for Tab 1

Pills Style

Pills Tab Content 1

Feedback & Display (Batch 3)

AlertDialog

Progress

Avatar

SMMDLGXL

Avatar Group

+2ABC

Badge

DefaultPrimaryAccentRedGreenBlueXSLG

Tag

ReactTypeScriptPanda CSSNo Remove

Simple Styled (Batch 4)

Skeleton

Separator

Left

Right

Label

Extra Small Label

Small Label

Medium Label

Large Label

Email Address

Link

Default Link Primary Link Accent Link Danger Link Underlined Link

Banner

Callout

ℹ️

This is a default callout with some helpful information.

💡

This is a primary callout for tips and suggestions.

⚠️

This is an accent callout for warnings.

Composite & Layout (Batch 5)

Card

This is the card content. It can contain any kind of information.

A card with an image cover.

Table

Name	Email	Role
John Doe	[email protected]	Admin
Jane Smith	[email protected]	User
Bob Wilson	[email protected]	Editor
3 users total

List

First Item
Description for item 1
Second Item
Description for item 2
Third Item

First step
Second step
Third step

Container

This is a medium container. It constrains the content width.

FlexBox

Item 1

Item 2

Item 3

Column Direction

Row 1

Row 2

Row 3

GridView

4 Columns

Text & Typography (Batch 6)

ButtonGroup

ControlGroup

Typography

Default text using Text componentSize 1 - smallestSize 4 - mediumSize 8 - largeStrong/bold textUnderlined text~~Strikethrough text~~Italic text

This is a paragraph component for longer blocks of text.

Gradient text effect

Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Custom Heading with primary color

Custom Heading with accent color

Gradient Heading

Kbd (Keyboard)

PressCtrl+Cto copy

Cmd+Shift+P

Code

Use npm install to install dependencies.The primary color variant.The accent color variant.The success color variant.The error color variant.

function hello() {
  console.log("Hello, World!");
}

hello();