esm-shadcn
v0.0.5
Published
Shadcn UI components for ESM imports via esm.sh - external dependencies
Downloads
46
Maintainers
uilib_coReadme
esm-shadcn
Shadcn UI components for ESM imports via esm.sh. Small bundle size - esm.sh automatically handles all dependencies!
Features
- ✅ All shadcn/ui components included
- ✅ Small bundle (~165KB) - dependencies resolved by esm.sh
- ✅ Works with esm.sh, jsDelivr, or any ESM CDN
- ✅ Perfect for quick prototypes, HTML files, or browser-based development
- ✅ Tailwind CSS v4 compatible
Usage via esm.sh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
/* Your Tailwind CSS variables here - see example below */
</style>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/[email protected]",
"react-dom/client": "https://esm.sh/[email protected]/client",
"esm-shadcn": "https://esm.sh/esm-shadcn@latest"
}
}
</script>
</head>
<body>
<div id="root"></div>
<script type="module">
import React from "react";
import { createRoot } from "react-dom/client";
import {
// Utilities
cn,
// Accordion
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
// Alert
Alert,
AlertDescription,
AlertTitle,
// AlertDialog
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
AlertDialogPortal,
AlertDialogTitle,
AlertDialogTrigger,
// AspectRatio
AspectRatio,
// Avatar
Avatar,
AvatarFallback,
AvatarImage,
// Badge
Badge,
badgeVariants,
// Breadcrumb
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
// Button
Button,
buttonVariants,
// ButtonGroup
ButtonGroup,
ButtonGroupSeparator,
ButtonGroupText,
buttonGroupVariants,
// Calendar
Calendar,
CalendarDayButton,
// Card
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
// Carousel
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
// Chart
ChartContainer,
ChartLegend,
ChartLegendContent,
ChartStyle,
ChartTooltip,
ChartTooltipContent,
// Checkbox
Checkbox,
// Collapsible
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
// Command
Command,
CommandDialog,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
CommandShortcut,
// ContextMenu
ContextMenu,
ContextMenuCheckboxItem,
ContextMenuContent,
ContextMenuGroup,
ContextMenuItem,
ContextMenuLabel,
ContextMenuPortal,
ContextMenuRadioGroup,
ContextMenuRadioItem,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuSub,
ContextMenuSubContent,
ContextMenuSubTrigger,
ContextMenuTrigger,
// Dialog
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogPortal,
DialogTitle,
DialogTrigger,
// Drawer
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerPortal,
DrawerTitle,
DrawerTrigger,
// DropdownMenu
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuPortal,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
// Empty
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
// Field
Field,
FieldContent,
FieldDescription,
FieldError,
FieldGroup,
FieldLabel,
FieldLegend,
FieldSeparator,
FieldSet,
FieldTitle,
// Form
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
useFormField,
// HoverCard
HoverCard,
HoverCardContent,
HoverCardTrigger,
// Input
Input,
// InputGroup
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
InputGroupTextarea,
// InputOTP
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
// Item
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemFooter,
ItemGroup,
ItemHeader,
ItemMedia,
ItemSeparator,
ItemTitle,
// Kbd
Kbd,
KbdGroup,
// Label
Label,
// Menubar
Menubar,
MenubarCheckboxItem,
MenubarContent,
MenubarGroup,
MenubarItem,
MenubarLabel,
MenubarMenu,
MenubarPortal,
MenubarRadioGroup,
MenubarRadioItem,
MenubarSeparator,
MenubarShortcut,
MenubarSub,
MenubarSubContent,
MenubarSubTrigger,
MenubarTrigger,
// NavigationMenu
NavigationMenu,
NavigationMenuContent,
NavigationMenuIndicator,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
NavigationMenuViewport,
navigationMenuTriggerStyle,
// Pagination
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
// Popover
Popover,
PopoverAnchor,
PopoverContent,
PopoverTrigger,
// Progress
Progress,
// RadioGroup
RadioGroup,
RadioGroupItem,
// Resizable
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
// ScrollArea
ScrollArea,
ScrollBar,
// Select
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
// Separator
Separator,
// Sheet
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
// Sidebar
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupAction,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarInput,
SidebarInset,
SidebarMenu,
SidebarMenuAction,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSkeleton,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarProvider,
SidebarRail,
SidebarSeparator,
SidebarTrigger,
useSidebar,
// Skeleton
Skeleton,
// Slider
Slider,
// Sonner
Toaster,
// Spinner
Spinner,
// Switch
Switch,
// Table
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
// Tabs
Tabs,
TabsContent,
TabsList,
TabsTrigger,
// Textarea
Textarea,
// Toggle
Toggle,
toggleVariants,
// ToggleGroup
ToggleGroup,
ToggleGroupItem,
// Tooltip
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
// Hooks
useIsMobile,
} from "esm-shadcn";
function App() {
return React.createElement(
Card,
{ className: "w-[350px]" },
React.createElement(CardHeader, null, React.createElement(CardTitle, null, "Hello World")),
React.createElement(
CardContent,
{ className: "space-y-4" },
React.createElement(Label, { htmlFor: "name" }, "Name"),
React.createElement(Input, { id: "name", placeholder: "Enter your name" }),
React.createElement(Button, null, "Submit")
)
);
}
const root = createRoot(document.getElementById("root"));
root.render(React.createElement(App));
</script>
</body>
</html>Required CSS Variables
Add these CSS variables for shadcn/ui theming (Tailwind CSS v4):
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0);
--card-foreground: oklch(0.141 0.005 285.823);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.141 0.005 285.823);
--primary: oklch(0.21 0.006 285.885);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.967 0.001 286.375);
--muted-foreground: oklch(0.552 0.016 285.938);
--accent: oklch(0.967 0.001 286.375);
--accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.92 0.004 286.32);
--input: oklch(0.92 0.004 286.32);
--ring: oklch(0.705 0.015 286.067);
}Available Components
All shadcn/ui components are exported:
- Layout: Card, Separator, Resizable, ScrollArea, Sidebar
- Forms: Button, Input, Textarea, Select, Checkbox, Radio, Switch, Slider, Label, Form
- Feedback: Alert, AlertDialog, Dialog, Drawer, Sheet, Toast (Sonner), Progress
- Navigation: Breadcrumb, Menubar, NavigationMenu, Pagination, Tabs
- Data Display: Accordion, Avatar, Badge, Calendar, Carousel, Chart, Table, Tooltip
- Overlay: ContextMenu, DropdownMenu, HoverCard, Popover, Command
- Utilities: cn (className merger)
License
MIT