Component gallery

42 canonical components · 4 adapters · 3/3 built-ins at full coverage

Coverage: adapter ✓ renders it · adapter — falls back to a placeholder

Layout 8

Box

box
containerdivframe
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Card

card
containerpanelbox
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Container

container
layoutwrappercenteredmax-width
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Divider

divider
separatorhrrule
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Grid

grid
layoutgridcolumns
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Section

section
layoutsemanticlandmark
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Spacer

spacer
layoutgapspacewhitespace
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Stack

stack
flexvstackhstacklayout
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Content 2

Heading

heading
titleh1h2header
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Text

text
textparagraph
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Input 10

Button

button
ctaaction
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Checkbox

checkbox
formtoggle
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Date Picker

date-picker
datecalendarforminput
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Date Range

date-range-picker
daterangecalendarform
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Input

input
formfield
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Radio

radio
formradio-groupchoice
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Select

select
dropdowncomboboxform
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Switch

switch
formtoggle
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Textarea

textarea
formmultilineinput
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Time Picker

time-picker
timeclockforminput
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Display 8

Avatar

avatar
profileuserpicture
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Badge

badge
tagpillchipstatus
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Code

code
codesnippetpre
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Data List

data-list
dldescription-listkey-valueaccepts:data-list-item
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Data List Item

data-list-item
dtddkey-value
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Icon

icon
glyphsvgsymbol
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Skeleton

skeleton
loadingplaceholdershimmer
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Table

table
tablegriddata
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Navigation 7

Breadcrumb

breadcrumb
navcrumbspath
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Link

link
anchorhref
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Nav Item

nav-item
navlinkmenu-item
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Nav Menu

nav-menu
navmenusidebaraccepts:nav-item
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Pagination

pagination
navpagespaginate
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Stepper

stepper
navwizardprogress
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Tabs

tabs
navtabssegmented
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Feedback 3

Alert

alert
notificationbannermessage
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Progress

progress
progressbarpercentageloading
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Spinner

spinner
loaderloadingindeterminatebusy
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Media 4

Audio

audio
mediasoundmusic
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Carousel

carousel
mediaslideshowgallery
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —

Image

image
imgpicture
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) ✓

Video

video
mediafilmmovie
shadcn ✓MUI ✓Plain HTML ✓Chakra (example) —