A collection of shadcn/ui components, blocks and page templates for building modern, fast and beautiful websites. Built on Radix UI and Base UI. Works with the shadcn CLI and any preset, in light, dark and RTL.
Installs all 296 components. Without our CLI, run instead.
Hirael publishes a shadcn registry at hirael.com, with 296 components installable through the shadcn CLI.
Copy a prompt for your agent, copy the install command, or open the docs that ship it.
Bright, shader-lit agency landing page: a full-viewport hero with an animated WebGL backdrop and pill navigation, an editorial about section, a featured-work grid of autoplaying video cards, and a dark closing footer with a call to action. Built on the shaders package, with a self-contained light palette.
Count-up number that tweens to its target with easing, Intl formatting (currency, compact, percent), prefix/suffix and reduced-motion support.
Drop-in admin shell layout built on the shadcn Sidebar primitive: collapsible icon-rail sidebar with nav badges and a footer profile row, sticky topbar with breadcrumb, command-palette search and notification button, plus a live-filtering accounts table in the main area.
Split-pane inbox shell: icon rail with unread indicator, searchable conversation list with an unread filter, and a reading pane with star toggle and a reply composer that appends to the thread.
Starter shell on the shadcn Sidebar primitive (inset variant): workspace switcher and ⌘K search in the rail, icon-collapsible nav with tooltips, an inset header with trigger, notification count and avatar, and a welcome heading over dashed placeholder slots.
Dark, liquid-glass marketing landing page: a full-viewport hero with a cross-fading background video, a frosted glass pill nav and an inline email form, then scroll-revealed about, featured-video, philosophy and services sections, closing on a multi-column footer. Framer Motion throughout, with a self-contained pure-black palette and Instrument Serif accents.
Composable audio player with play/pause, scrub-safe seek with buffered tint, skip, time readouts, volume and playback rate.
GitHub-style contribution heatmap with month and weekday labels, tooltips, configurable intensity scale and a legend.
Imperative confirmation dialog: a root provider plus a useConfirm hook that resolves a promise on confirm or cancel. Default or destructive tone, an optional icon, and an async confirm action with a pending spinner.
Click-to-copy button with copied feedback, icon-only or labelled, ghost / outline variants and a non-secure-context clipboard fallback.
Dark, cinematic creative-studio landing page: a full-viewport hero with an animated backdrop and pull-up wordmark, a scroll-revealed about section, and a staggered feature-card grid. Framer Motion throughout, with a self-contained warm-cream palette.
Operations dashboard with Tabs date-range switcher (1d / 7d / 30d / 90d), 4-up metric strip, weekly bar chart and a recent-activity feed. Data switches live with the range.
Dual-month range picker with hover preview, presets, min/max bounds and keyboard nav. Includes an inline DateRangeCalendar, no date library.
Centered heading with two-column accordion grid below. Each row tagged with a Qn index.
Centered personal hero: a live "available for work" badge, a serif headline with a primary-tinted emphasis span, a sub-line, a three-stat row with hairline dividers, dual rounded CTAs, and a tooltip-backed core-stack icon row framed by gradient rules. Rotated geometric border accents fade in behind it (and stay still under reduced motion).
Click-to-edit text with preview, validation, async submit and confirm/cancel controls. Input and textarea modes.
Hairline-joined grid of KPI tiles with label, value, an up/down/flat delta chip and a dependency-free sparkline. Ships composable parts.
Fullscreen image lightbox on Radix Dialog with gallery navigation, zoom and pan, swipe gestures, captions and a thumbnail strip.
Dark, monochrome newsletter landing page: a full-screen video hero with an inline subscribe form, an answer-engine section, scroll-revealed mission copy, a four-up feature grid and a streaming-video call to action. Framer Motion throughout, with a self-contained pure-black palette and liquid-glass accents.
A trigger card that morphs into a centered dialog via shared-layout animation, with focus trapping, scroll lock, Esc to close and reduced-motion support.
Chip-based multi-select with command-palette dropdown, search, select-all and async loader. Compound and single-prop APIs.
Light enterprise-infrastructure landing page: a floating pill navbar that shrinks on scroll, a full-screen video hero, a dark service-card grid that unfolds on hover, a chaos-versus-control split around a circular streaming video, and a four-pillar delivery staircase. Self-contained navy-and-lavender palette with multi-stop brand gradients, driven by hls.js and lucide-react.
Dark, single-page personal portfolio: a counter loading screen, an HLS video hero with a floating nav and a cycling role line, a bento work grid, a journal list, a scroll-pinned parallax gallery with lightbox, count-up stats and a video contact footer. Self-contained dark palette, driven by GSAP and Framer Motion.
Grid of dashboard shortcut tiles with icon, label and description. Each tile is a button or, via asChild, a link. Ships composable parts.
DeFi staking landing page for a fluid-asset protocol: a video hero on a rounded card with glass stat cards and a carved documentation corner, a metrics band, a bento feature grid, a video call to action and a light footer. Self-contained light palette, Helvetica system type, Framer Motion throughout.
Canvas signature capture with velocity-based ink, per-stroke undo, theme-aware re-inking and PNG/JPEG export via ref.
Multi-step progress indicator with horizontal and vertical orientation, completed / active / inactive states, clickable steps and a compound API.
Premium fintech landing page for a stablecoin: a full-bleed video hero with a custom halo wordmark and an infinite brand marquee, a meet-the-product card grid, a backers marquee, and a use-modes split with an autoplaying video panel, closing on a dark anchor footer. Self-contained light palette.
Dark, premium landing page for an electric RV brand: a full-screen video hero with liquid-glass navigation, a centered tagline, a split feature card with switchable tabs, an HLS streaming statement with a stats row, a video preorder call to action and a multi-column footer. Self-contained pure-black palette, Inter + Instrument Serif type.
The components shadcn/ui doesn't ship.
80+ components, 140+ section blocks and 10+ full-page templates. Built on shadcn primitives, installed with the shadcn CLI, owned by you.
Website · Components · Blocks · Templates · Changelog
npx shadcn@latest add @hirael/multi-select
No setup needed. Hirael is listed in shadcn's registry directory, so any project that uses shadcn/ui can install from it right away.
Every preview is live on hirael.com, with light, dark and RTL toggles.
| Inputs | multi-select, tag input, phone, currency, address, credit card, mention, password, duration, number range |
| Pickers | date, date range, time, month, year, color, emoji, country |
| Files and media | file dropzone, image cropper, avatar upload, signature pad, lightbox, image compare, audio player |
| Data | data table, kanban, tree view, JSON viewer, diff viewer, YAML editor, cron editor, calendar heatmap, sparkline |
| Overlays and flows | command palette, product tour, dock, stepper, confirm dialog, unsaved-changes guard, table of contents |
| Motion | marquee, text reveal, scroll reveal, animated number, spotlight card, tilt card, morphing dialog |
| Blocks | hero, feature, pricing, FAQ, auth, dashboard, app shell, ecommerce, AI chat, cloud console, changelog and more |
| Templates | complete landing pages, portfolios and SaaS sites, ready to edit |
1. Set up shadcn/ui if your project doesn't use it yet.
npx shadcn@latest init
2. Add the components you need. The CLI also installs anything they depend on, including the shadcn/ui components they're built from.
npx shadcn@latest add @hirael/multi-select @hirael/date-range-picker @hirael/pricing-04
3. Use them in your code.
'use client';
import { useState } from 'react';
import { MultiSelect, MultiSelectContent, MultiSelectTrigger } from '@/components/multi-select';
const frameworks = [
{ value: 'next', label: 'Next.js' },
{ value: 'remix', label: 'Remix' },
{ value: 'astro', label: 'Astro' },
];
export function FrameworkPicker() {
const [value, setValue] = useState([]);
return (
);
}
The commands above install the Radix UI version. If your project uses Base UI,
install from the base path instead:
npx shadcn@latest add https://hirael.com/r/base/multi-select.json
Hirael is free and MIT licensed. If it saved you a few hours:
Sponsored by Sahabti, 404 skill and Mohammad Shehadeh.
Contributions are welcome, from bug fixes to new components and blocks. Please read the contributing guide to learn how the project is organized and how to submit a change, and follow our Code of Conduct.
Running the site locally
This repository is the Hirael website. It previews every component, block and template, and serves the files the shadcn CLI installs from. You'll need Node.js 24 and pnpm 12.
git clone https://github.com/MohammadShehadeh/hirael.git
cd hirael
pnpm install
pnpm dev
The site runs at http://localhost:3000.
| Command | What it does |
|---|---|
pnpm dev | Starts the development server |
pnpm build | Builds the registry and exports the static site to out/ |
pnpm test | Runs the tests |
pnpm lint | Checks the code with ESLint |
pnpm typecheck | Checks the TypeScript types |
See the contributing guide for how the code is organized.
Please report security vulnerabilities privately, as described in SECURITY.md.
MIT © Mohammad Shehadeh. See LICENSE.
The packages and primitives its components pull in, counted across the registry.
Every appearance and removal our crawl has seen in the registry index.
Hirael is a component library on 21st.dev by Mohammad Shehadeh with 217 public React components. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.