Your theme, every component.
Generate an accent and radius, pick a preset, or paste a CSS variable block from your own app — and watch the entire Hirael registry re-skin, then copy the result back out. The active theme is persisted in your browser; reset any time.
mode · dark·0 overrides active
Surfaces
Backgrounds & cards
The three surface layers components stack on: background, card, popover. Borders read against each.
--backgroundAa · the quick brown foxMuted line of secondary copy.
--cardAa · the quick brown foxMuted line of secondary copy.
--popoverAa · the quick brown foxMuted line of secondary copy.
Primitives
Buttons, badges, inputs
The base shadcn primitives Hirael components compose on top of.
DefaultOutlineDestructive
Muted foreground reads against background.
Registry
Hirael components
Every stable component re-renders against the active theme. Edit it and watch them all update at once.
Number Range
/number-rangeYear Picker
/year-pickerTag Input
/tag-inputCombobox
/comboboxLazy Select
/lazy-selectPassword Input
/password-inputCurrency Input
/currency-inputPhone Input
/phone-inputFile Dropzone
/file-dropzoneStat Card
/stat-cardRating
/ratingTimeline
/timelineKbd
/kbdCallout
/calloutScroll Progress
/scroll-progressMonth Picker
/month-pickerTime Picker
/time-pickerColor Picker
/color-pickerAvatar Stack
/avatar-stackAnnouncement Bar
/announcement-barSpinner
/spinnerCopy Button
/copy-buttonMarquee
/marqueeTree View
/tree-viewAnimated Number
/animated-numberStepper
/stepperSortable
/sortableDate Picker
/date-pickerDate Range Picker
/date-range-pickerMention Input
/mention-inputRich Text Editor
/rich-text-editorInline Edit
/inline-editSignature Pad
/signature-padImage Cropper
/image-cropperImage Compare
/image-compareLightbox
/lightboxCountdown Timer
/countdown-timerQR Code
/qr-codeCalendar Heatmap
/calendar-heatmapCode Block
/code-blockMasonry
/masonryAudio Player
/audio-playerMedia Input
/media-inputTour
/tourActivity Feed
/activity-feedAudit Log
/audit-logBlur Reveal
/blur-revealText Reveal
/text-revealScroll Reveal
/scroll-revealSpotlight Card
/spotlight-cardMagnetic Button
/magnetic-buttonCursor Glow
/cursor-glowTilt Card
/tilt-cardMorphing Dialog
/morphing-dialogDock
/dockFloating Action Button
/floating-action-buttonFloating Toolbar
/floating-toolbarSplit View
/split-viewResizable Panels
/resizable-panelsInspector Panel
/inspector-panelTenant Switcher
/tenant-switcherKPI Grid
/kpi-gridQuick Actions
/quick-actionsNotifications
/notificationsBilling Card
/billing-cardSubscription Plans
/subscription-plansAPI Keys
/api-keysUsage Dashboard
/usage-dashboardTable of Contents
/tocConfirm
/confirmUnsaved Guard
/unsaved-guardData Table
/data-tableAccent
Primary, ring, destructive
The accents that should only ever appear when something is important. They borrow the ring color for focus states.
primary
ring
destructive
accent
muted
border
