Hirael

Overview

Hirael is a collection of shadcn/ui components, blocks and page templates covering the components shadcn/ui does not ship, such as multi-select, date and time pickers, a file dropzone and currency input. It is built on Radix UI and Base UI, works with the shadcn CLI and any preset, and supports light, dark and RTL. The project is open source on GitHub and is at v7.5.0.

The catalog lists 101 components, 184 blocks in 36 categories and 13 complete page templates. Every item follows shadcn conventions (compound parts, data-slot attributes, the project's components.json and theme tokens), so it sits next to existing shadcn components and matches them. It runs anywhere shadcn/ui and Tailwind CSS run, including Next.js, Remix, Vite and Astro.

Features

• Inputs: Multi-select, tag input, autocomplete, currency input, phone input, password input, duration input, number field and number range.
• Pickers: Date range picker on shadcn Calendar, plus month, year, time and color pickers.
• Utility components: File dropzone, rating, timeline, callout, avatar stack, scroll progress and kbd button.
• Blocks: Heroes, features, pricing, testimonials, FAQs, CTAs, headers, footers, dashboards and auth flows (login, signup, OTP verification, two-factor setup).
• Page templates: 13 full pages, such as a shader-lit agency landing page and a newsletter landing page, copied in with one command.
• RTL ready: Logical properties, mirrored icons and arrow keys, so dir=rtl is enough.
• Responsive testing: Each item is checked from phone width to ultra-wide.

Tech stack

• React, Tailwind CSS
• shadcn/ui on Radix UI or Base UI

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @hirael/component-name