A shadcn-compatible library of brand-aligned, accessible, token-driven UI primitives. Install any component straight into your project — no copy-paste, no design drift.
Bundled chrome cohort — installs theme-provider, theme-switcher, page-shell, site-nav, and site-footer as one atomic unit, plus the canonical design tokens. Prefer this over installing the primitives individually.
npx shadcn@latest add @dcyfr-labs/dcyfr-chromeAccessible, validation-aware form controls with secure surface variants.
Brand-aligned button wrapping the shadcn/ui primitive with dcyfr-labs design tokens and brand-specific variants.
@dcyfr-labs/dcyfr-buttonInput with built-in validation (error/success with icons + aria). Surface variants: default, secure, ghostly.
@dcyfr-labs/dcyfr-inputTextarea with built-in validation and matching surface variants. Mirrors the Input API.
@dcyfr-labs/dcyfr-textareaLabel with default, required (asterisk indicator), and secure variants, plus a required shorthand prop.
@dcyfr-labs/dcyfr-labelRadix-backed select with surface variants and sizes; glassy popover content panel by default.
@dcyfr-labs/dcyfr-selectRadix-backed checkbox with default and secure variants and an indeterminate state.
@dcyfr-labs/dcyfr-checkboxRadix-backed radio group with default and secure variants and grouped root + item subcomponents.
@dcyfr-labs/dcyfr-radio-groupSurfacing state — alerts, progress, loading, toasts, and labels.
Alert with title + description subcomponents and info/secure/success/warning/danger/ghostly variants.
@dcyfr-labs/dcyfr-alertBadge with brand/secure/danger/info/outline/ghostly variants in three sizes.
@dcyfr-labs/dcyfr-badgeRadix-backed progress bar with default/secure/danger/success variants, sizes, and an indeterminate mode.
@dcyfr-labs/dcyfr-progressSkeleton loader with pulse, shimmer, text, and circle variants. Respects reduced-motion.
@dcyfr-labs/dcyfr-skeletonBrand-themed sonner Toaster with DCYFR tokens for default/success/error/warning/info toasts.
@dcyfr-labs/dcyfr-sonnerRadix-backed tooltip with default, secure, and inverted content variants.
@dcyfr-labs/dcyfr-tooltipStructural primitives — cards, tables, separators, and scroll surfaces.
Card with default, elevated, secure, glass, and ghostly variants.
@dcyfr-labs/dcyfr-cardFull table set with default, striped, compact, and elevated variants; compact auto-tightens cell density.
@dcyfr-labs/dcyfr-tableRadix-backed accordion with default, bordered, and ghostly variants and preserved chevron rotation.
@dcyfr-labs/dcyfr-accordionRadix-backed avatar with default, ring, and square variants in five sizes, plus Image + Fallback subcomponents.
@dcyfr-labs/dcyfr-avatarRadix-backed separator with solid, gradient, and dashed variants in both orientations.
@dcyfr-labs/dcyfr-separatorRadix-backed scroll area with default and brand-rail scrollbar variants.
@dcyfr-labs/dcyfr-scroll-areaThe site-scaffold cohort — tokens, theming, and the nav/footer/page shell that give every DCYFR site its identity.
Canonical :root + .dark semantic token blocks plus DCYFR tokens (--secure, --success, --warning, --ease-brand). The source of truth for the site-scaffold contract.
@dcyfr-labs/dcyfr-design-tokensnext-themes wrapper matching the site-scaffold contract — render at the layout root with class strategy and system support.
@dcyfr-labs/dcyfr-theme-providerLight / Dark / System selector built on the button + dropdown primitives.
@dcyfr-labs/dcyfr-theme-switcherLayout primitive composing nav + footer + children with padding and max-width variants.
@dcyfr-labs/dcyfr-page-shellTop-level navigation — desktop row + theme switcher + optional CTA, mobile hamburger + Sheet drawer. Variants: default, centered, minimal.
@dcyfr-labs/dcyfr-site-navStandard footer with brand slot, up to four link columns, and copyright. Variants: default, minimal.
@dcyfr-labs/dcyfr-site-footerDistinctive, mostly server-rendered pieces that carry the DCYFR look.
Decorative fanned-card hero — three slots in a shallow fan with pure-CSS hover spread. Server component, zero client JS.
@dcyfr-labs/dcyfr-hero-stackPer-render-random featured-item slot. Generic server component that picks one item via Fisher–Yates per request.
@dcyfr-labs/dcyfr-spotlightCounts up to a value with easeOutCubic on first mount. Respects reduced-motion and always uses tabular-nums.
@dcyfr-labs/dcyfr-animated-counterSingle-line live-stats marquee for site chrome, with optional inter-stat dividers and brand-highlighted values.
@dcyfr-labs/dcyfr-status-marqueeEvery DCYFR site is built from these primitives and the canonical design tokens — so what you install is exactly what runs in production. Explore the rest of the open-source stack next.