shadcn Web Components

Every component in the library, loaded from the published npm package.

@billy_mcdowell/shadcn-web-components@latest

Loading the component library...

Content and feedback

Accordion

What is this?A framework-agnostic component library built with Lit.Is it accessible?The interactive components include keyboard and ARIA behavior.

Alert

Heads upYou are viewing the production npm build.DestructiveThis variant highlights a dangerous condition.

Aspect Ratio

16:9

Avatar

SCWM

Badge

DefaultSecondaryDestructiveOutline

Empty

Create project

Sonner

Click a button to show a notification.

Progress

Skeleton

Spinner

Typography

A production galleryWeb components that work anywhere.Published June 2026

Actions and forms

Button

DefaultSecondaryOutlineGhostLinkDeleteDisabled

Button Group

LeftCenterRight

Combobox

No framework found.Next.jsSvelteKitNuxt.jsRemix (unavailable)AstroNext.jsSvelteKitAstro

Command

No results found.CalendarSearch EmojiCalculatorProfile ⌘PBilling ⌘BSettings

Date Picker

Checkbox

Accept the termsDisabled

Field, Label and Input

Email

Input Group

https://.com

Input OTP

Native Select

Radio Group

Compact
Comfortable

Select

Select a fruitAppleBananaPear

Slider

Switch

Notifications

Textarea

Toggle

BI

Toggle Group

LeftCenterRight

Layout and data

Calendar

Carousel

1
2
3
4
5

Chart

Card

Deploy projectShip the production build.

The package is pinned to an exact npm version.

Deploy

Collapsible

Toggle details

This content can be expanded and collapsed.

Item and Kbd

Command palette CmdKUnavailable item

Separator

Above

Below

Data Table

Resizable

Sidebar
Content

Table

Recent invoicesInvoiceStatusAmountINV001Paid$250.00INV002Pending$150.00Total$400.00

Tabs

AccountPassword

Manage your account details.

Update your password.

Sidebar

WorkspaceDashboardSettings
Main content

A flexible shell beside the sidebar.

Navigation

Pagination

123

Breadcrumb

HomeComponents

Menubar

FileActionsNew tabAutosaveEditUndoRedo

Navigation Menu

Getting started
Installation
Add the package to your project.Components
Browse the complete library.
Documentation

Menus and overlays

Alert Dialog

Delete accountAre you sure?This action cannot be undone.CancelContinue

Context Menu

Right-click here
ActionsBackShow toolbar

Dialog

Edit profileEdit profileMake changes to your public details.NameCancelSave

Drawer

Open drawerActivity goalSet your daily target.Done

Dropdown Menu

Open menuAccountProfileNotifications

Hover Card

@shadcnshadcn/ui

Beautifully designed components.

Popover

Open popover
Dimensions

Sheet

Open sheetProject settingsAdjust settings for this project.Save

Tooltip

+Add item