UI Registry

by Happenings

New project? Create a Next.js app with shadcn first

1. Create app

npx create-next-app@latest my-app --tailwind --typescript

2. Init shadcn

cd my-app && npx shadcn init

Install components

Install everything

npx shadcn add https://ui.happenings.social/r/all.json

Or pick individual components

npx shadcn add https://ui.happenings.social/r/button.json

Register namespace for shorter commands

npx shadcn registry add @happenings=https://ui.happenings.social/r/{name}.json

Then install by name

npx shadcn add @happenings/all

Components

85
NameTypeDescription
accordionuiAccordion component
alert-dialoguiAlert Dialog component
alertuiAlert component
aspect-ratiouiAspect Ratio component
avataruiAvatar component
badgeuiBadge component
breadcrumbuiBreadcrumb component
button-groupuiButton Group component
buttonuiButton component
calendaruiCalendar component
carduiCard component
carouseluiCarousel component
chartuiChart component
code-blockuiCode block with copy-to-clipboard button
checkboxuiCheckbox component
collapsibleuiCollapsible component
comboboxuiCombobox component
commanduiCommand component
context-menuuiContext Menu component
dialoguiDialog component
directionuiDirection component
draweruiDrawer component
dropdown-menuuiDropdown Menu component
emptyuiEmpty component
fielduiField component
formuiForm component
hover-carduiHover Card component
input-groupuiInput Group component
input-otpuiInput Otp component
inputuiInput component
itemuiItem component
kbduiKbd component
labeluiLabel component
markdown-editoruiMarkdown Editor component
menubaruiMenubar component
native-selectuiNative Select component
number-stepperuiInline number stepper with decrement/increment buttons replacing native number input
navigation-menuuiNavigation Menu component
onboardinguiOnboarding component
paginationuiPagination component
popoveruiPopover component
progressuiProgress component
radio-groupuiRadio Group component
resizableuiResizable component
scroll-areauiScroll Area component
selectuiSelect component
separatoruiSeparator component
sheetuiSheet component
sidebaruiSidebar component
skeletonuiSkeleton component
slideruiSlider component
snap-carouseluiSnap Carousel component
sonneruiSonner component
spinneruiSpinner component
switchuiSwitch component
tableuiTable component
tabsuiTabs component
textareauiTextarea component
toggle-groupuiToggle Group component
toggleuiToggle component
tooltipuiTooltip component
beta-badgecomponentBeta Badge component
chart-area-axescomponentChart Area Axes component
chart-area-defaultcomponentChart Area Default component
chart-area-gradientcomponentChart Area Gradient component
chart-area-iconscomponentChart Area Icons component
chart-area-interactivecomponentChart Area Interactive component
chart-area-legendcomponentChart Area Legend component
chart-area-linearcomponentChart Area Linear component
chart-area-stacked-expandcomponentChart Area Stacked Expand component
chart-area-stackedcomponentChart Area Stacked component
chart-area-stepcomponentChart Area Step component
date-time-pickercomponentDate Time Picker component
image-crop-dialogcomponentImage Crop Dialog component
image-crop-presetscomponentImage Crop Presets component
sidebar-user-menucomponentSidebar User Menu component
system-status-badgecomponentSystem Status Badge component
use-mobilehookUse Mobile hook
utilslibcn() utility function (clsx + tailwind-merge)
themethemeHappenings design system theme with OKLch colors, zinc base, and four theme variants (default, slate, warm, stone)
announcement-modaluiMulti-page announcement modal with pagination dots and slide transitions
guided-touruiStep-by-step guided tour dialog with optional image panels and keyboard navigation
locale-switcheruiLanguage switcher dropdown with standalone, icon button, and sub-menu variants
logouiHappenings logo SVG component with currentColor fill
theme-switcheruiTheme picker dropdown with standalone, icon button, and sub-menu variants supporting light, warm, stone, dark, slate, and system themes

Happenings Group A/S