Vite + React

Menu Item 1Layer 1 Nested Item 1Layer 2 Nested Item 2Link Layer 3 Nested Item 1Layer 3 Nested Item 2Layer 3 Nested Item 3Layer 3 Nested Item 4Layer 2 Nested Item 3Layer 2 Nested Item 4Layer 2 Nested Item 5Layer 1 Nested Item 2Layer 2 Item 1Layer 2 Item 2Layer 2 Item 3Nested Item 3Layer 1 Nested Item 4Nested Item 4Menu Item 2MoreItem1Item2Right ItemRight ItemNested oneNested oneNested oneFinal one

Stencil Framework integration - React + JS

Accordion

Short content
Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.Content for Item #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Open/Close the first accordion itemChange Content dynamically

Alert

Attention! This is an alert message — check it out!

Badge

Label

Breadcrumbs

Breadcrumb 1GoogleBingYahooNaverBreadcrumb 2GoogleBingYahooNaverBreadcrumb 3

Button

Click meNot clickable when disabled
I'm a button in a div. Click to toggle full width

Card

OverlineHeadlineSome quick example text to build on the card title and make up the bulk of the card's contentButtonButton

Checkbox

label
Submit

Toggle DisabledToggle ErrorToggle Value

Disabled: false Error: false Value: false

CheckboxGroup

Option 0Option 1Option 2Option 3

Chip

Option 1 Option 2 Option 3 Option 4 Option 1 Option 2 Option 3 Option 4

Content Switcher

Item 1
Item 2
Item 3
Item 4

Date Picker


Dropdown

dropdown

Icon


IconButton


Link

Link

Modal

Hello. Welcome. What a pleasure it is to have you.
Console outputClose
Open Modal

MultiSelect



Notification

Success notification
Locked notification
Error notification

Number indicator

1

Pagination

First NameLast NameEmailPhone
JessamynEspinazojespinazo0@chicagotribune.com162-166-0977
IsacTooheritooher1@psu.edu655-567-3619
TabbathaProschketproschke2@weibo.com327-612-4850
NinettaMabbnmabb3@canalblog.com971-296-0911
DanniWallentindwallentin4@comcast.net983-297-0506
NeelyPurkinsnpurkins5@mediafire.com379-119-4237
JessikaKinkaidjkinkaid6@eventbrite.com771-888-6284
JuliannaSwindalljswindall7@aol.com252-614-0486
CorrinneGeevecgeeve8@wisc.edu450-872-8646
TrumannFluxtflux9@census.gov249-892-1585

Progress Bar

Small
Medium
Update Progress

Radio Button

label
Submit

Toggle DisabledToggle ErrorToggle Value

Disabled: false
Error: false
Value: false


Radio Button Group

Option 0Option 1Option 2Option 3

SingleSelect

Toggle DisabledToggle Error

Link

Link

Search Bar


Segmented Control

Label Label Label Label

Search Field

Spinner


Slider


Sidebar

Item TitleHeader SectionHeader Section
Hello. Welcome. What a pleasure it is to have you.
Console outputClose
Open Modal

Switch

label
Submit

Toggle DisabledToggle Value

Disabled: false
Value: false


Status



Stepper

Step 1Step 2Step 3Step 4Step 5DecrementIncrement

Tabs

Content for Tab #1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.Content for Tab #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.Content for Tab #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

Tag

Label Tag

Textarea

Submit formReset form

Text Field

Submit formReset form

Tooltip

I'm the compact tooltip reference element - Please hover me
I'm the dismissible tooltip reference element - Please click me
I'm the extended tooltip reference element - Please hover me

Table (basic)


Table (advanced)

Table with button


Table with sidebar filter


Footer

Title
Footer LinkFooter LinkFooter LinkFooter Link
Title
Footer LinkFooter LinkFooter LinkFooter Link
Title
Footer LinkFooter LinkFooter LinkFooter Link
Title
Footer LinkFooter LinkFooter LinkFooter Link
Terms


Header TextMenu ItemMenu ItemMenu Item