damon-ui
A shadcn registry of components and helpers that have already shipped in real projects. Install one with a single command, then edit the copied source. Every item has a markdown doc written for AI agents.
1. Add the registry to components.json
{
"registries": {
"@damon": "https://damon-ui.pages.dev/r/{name}.json"
}
}Theme
- Theme: marketing
Marketing preset: ink-on-white with a blue/violet brand pair, layered surfaces, brand gradient, fluid display type, and success/warning/info tones. Light and dark.
- Theme: admin
Admin/SaaS preset: warm linen canvas, paper cards, ink primary, terracotta brand, dense radius, sidebar tokens and status tones tuned for the warm canvas. Light and dark.
Lib
- NZ money
Locale-proof NZD formatting with BigInt rounding: formatMoney, formatCents, toCents, moneyInputValue, formatPercent, formatBytes.
- NZ date
Timezone-proof NZ dates: todayInNz, nzDateOf, addDays, differenceInDays, formatNzDate (7 Oct 2026), formatNzDateTime, nzTaxYear. No Date for calendar dates.
- GST
NZ GST maths with exact BigInt arithmetic (splitInclusive, gstFromInclusive, inclusiveFromExclusive, isGstConsistent) and IRD/GST number validation.
- JSON-LD
Safe <JsonLd> script plus schema.org builders with stable @ids: organization, website, service, article, faqPage, jsonLdGraph. Escapes </script> and line separators.
- SEO metadata
createSeo(config) → page(), article(), root() Next.js Metadata with canonical, Open Graph, Twitter and hreflang; plus truncate, plainText and hreflangAlternates.
UI
- Labeled field
Label + control + description + error in one component, with id, htmlFor, aria-describedby, aria-invalid and aria-required wired automatically. Plus FieldRow and FormActions. Built on shadcn Field.
- Status badge
Status value → coloured dot (or tinted pill) + readable label. Ships a default status→tone map (paid, overdue, draft…) you can extend.
- Notice
Inline message with info / success / warning / danger tones, optional title and actions, and the right ARIA role per tone. Built on shadcn Alert.
- Page header
App page title row: eyebrow (breadcrumb/back link), title with inline badge, description and right-aligned actions that wrap on mobile.
- Resource state
Empty, error and loading states for lists and pages: EmptyState, ErrorState (retry + reference id), LoadingState (table/cards/list skeletons). Built on shadcn Empty and Skeleton.
- Confirm dialog
Second confirmation for irreversible actions. Submits the enclosing form (server actions work) or runs an async onConfirm with pending and error states. Built on shadcn AlertDialog.
- Data table
Admin list table from plain column defs: client or URL-driven sorting, row selection with bulk-action bar, column visibility menu, empty and loading states. No table library. Built on shadcn Table.
- Filter bar
List filters as a GET form (shareable URLs, works before hydration): FilterBar, FilterField, FilterSearch, FilterSelect, removable FilterChips, optional auto-submit and preserved params.
- Pager
Pagination: numbered Pager (URL links or onPageChange, '21–40 of 312'), CursorPager for keyset pagination, plus pageRange and buildQuery helpers.
- Reveal
Fade-and-rise on first scroll into view (IntersectionObserver, fires once). Respects reduced motion and never hides content when JS is off, without a noscript override.
Blocks
- Page hero
Marketing page opener: eyebrow, fluid text-hero/text-display title, intro, actions and optional media, with a staggered rise-in. Uses theme-marketing surface and type tokens.
- CTA band
Closing call-to-action section: big heading, primary and secondary actions, small print; inverse, brand-gradient or muted tone, optional background image with scrim.