How AI agents should install, browse, and use the Happenings UI registry.
The Happenings UI Registry is an open shadcn/ui component registry hosted at ui.happenings.social. It contains 85+ production-ready components built on Radix UI, Tailwind CSS v4, and Font Awesome Pro. Components can be installed into any Next.js + Tailwind project using the shadcn CLI.
Run these commands in a Next.js project with shadcn initialized.
1. Register the namespace (one-time)
npx shadcn registry add @happenings=https://ui.happenings.social/r/{name}.json2. Install all components
npx shadcn add @happenings/all
Or install individual components
npx shadcn add @happenings/button
Or install by direct URL
npx shadcn add https://ui.happenings.social/r/button.json
Registry index: Fetch https://ui.happenings.social/r/index.json — returns all component names, types, descriptions, and dependency lists.
Single component: Fetch https://ui.happenings.social/r/{name}.json — returns full source code, file paths, dependencies, and registry dependencies.
Component page: Visit https://ui.happenings.social/{name} — human-readable page with preview, install command, source, and a "Copy as Markdown" button.
Design manifest: Visit https://ui.happenings.social/manifest — the 12 design principles behind the system.
Each component page has a "Copy as Markdown" button that copies the component name, description, install command, dependencies, and full source code as a Markdown document. Use this to feed component source into an AI agent context or paste into documentation.
UI Primitives (66)
| accordion | Accordion component |
| alert-dialog | Alert Dialog component |
| alert | Alert component |
| aspect-ratio | Aspect Ratio component |
| avatar | Avatar component |
| badge | Badge component |
| breadcrumb | Breadcrumb component |
| button-group | Button Group component |
| button | Button component |
| calendar | Calendar component |
| card | Card component |
| carousel | Carousel component |
| chart | Chart component |
| code-block | Code block with copy-to-clipboard button |
| checkbox | Checkbox component |
| collapsible | Collapsible component |
| combobox | Combobox component |
| command | Command component |
| context-menu | Context Menu component |
| dialog | Dialog component |
| direction | Direction component |
| drawer | Drawer component |
| dropdown-menu | Dropdown Menu component |
| empty | Empty component |
| field | Field component |
| form | Form component |
| hover-card | Hover Card component |
| input-group | Input Group component |
| input-otp | Input Otp component |
| input | Input component |
| item | Item component |
| kbd | Kbd component |
| label | Label component |
| markdown-editor | Markdown Editor component |
| menubar | Menubar component |
| native-select | Native Select component |
| number-stepper | Inline number stepper with decrement/increment buttons replacing native number input |
| navigation-menu | Navigation Menu component |
| onboarding | Onboarding component |
| pagination | Pagination component |
| popover | Popover component |
| progress | Progress component |
| radio-group | Radio Group component |
| resizable | Resizable component |
| scroll-area | Scroll Area component |
| select | Select component |
| separator | Separator component |
| sheet | Sheet component |
| sidebar | Sidebar component |
| skeleton | Skeleton component |
| slider | Slider component |
| snap-carousel | Snap Carousel component |
| sonner | Sonner component |
| spinner | Spinner component |
| switch | Switch component |
| table | Table component |
| tabs | Tabs component |
| textarea | Textarea component |
| toggle-group | Toggle Group component |
| toggle | Toggle component |
| tooltip | Tooltip component |
| announcement-modal | Multi-page announcement modal with pagination dots and slide transitions |
| guided-tour | Step-by-step guided tour dialog with optional image panels and keyboard navigation |
| locale-switcher | Language switcher dropdown with standalone, icon button, and sub-menu variants |
| logo | Happenings logo SVG component with currentColor fill |
| theme-switcher | Theme picker dropdown with standalone, icon button, and sub-menu variants supporting light, warm, stone, dark, slate, and system themes |
Composite Components (16)
| beta-badge | Beta Badge component |
| chart-area-axes | Chart Area Axes component |
| chart-area-default | Chart Area Default component |
| chart-area-gradient | Chart Area Gradient component |
| chart-area-icons | Chart Area Icons component |
| chart-area-interactive | Chart Area Interactive component |
| chart-area-legend | Chart Area Legend component |
| chart-area-linear | Chart Area Linear component |
| chart-area-stacked-expand | Chart Area Stacked Expand component |
| chart-area-stacked | Chart Area Stacked component |
| chart-area-step | Chart Area Step component |
| date-time-picker | Date Time Picker component |
| image-crop-dialog | Image Crop Dialog component |
| image-crop-presets | Image Crop Presets component |
| sidebar-user-menu | Sidebar User Menu component |
| system-status-badge | System Status Badge component |
Hooks & Utilities (2)
| use-mobile | Use Mobile hook |
| utils | cn() utility function (clsx + tailwind-merge) |
Happenings Group A/S