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 site-header, mobile-nav, bottom-nav, site-footer, theme-toggle and theme-provider as one atomic unit, along with the chrome-utilities CSS and the nav helpers and hooks those components depend on. Config-driven, so a site passes its navigation in as props rather than forking the components. Prefer this over installing the primitives individually.
npx shadcn@latest add @dcyfr-labs/dcyfr-chrome-v2Accessible, 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 chrome v2 header, footer and navigation 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-tokensFixed header that hides on scroll down and returns on scroll up. Backdrop blur, logo slot, config-driven dropdown menus, actions slot, theme toggle, and an integrated mobile drawer.
@dcyfr-labs/dcyfr-site-headerHamburger and Sheet drawer with sectioned navigation: 56px touch targets, icons, descriptions and badges. Active-page indicator, auto-close on navigation, theme toggle in the footer.
@dcyfr-labs/dcyfr-mobile-navMobile-only fixed bottom bar on a five-slot grid. Reveals on scroll down and hides on scroll up, the inverse of the header.
@dcyfr-labs/dcyfr-bottom-navSingle-row footer: copyright line plus inline links. Server-compatible, with no client hooks and plain anchors. Brand and links passed as props.
@dcyfr-labs/dcyfr-site-footer-v2Single-button three-state cycler (system, light, dark) that uses View Transitions where available, with a hydration-safe placeholder.
@dcyfr-labs/dcyfr-theme-togglenext-themes wrapper matching the site-scaffold contract. Adds View Transitions detection for smooth theme swaps. Render at the layout root.
@dcyfr-labs/dcyfr-theme-provider-v2The utility classes the chrome components reference: touch-target for a 44px hit area, plus transition-base and transition-fast, both bound to the theme engine motion tier.
@dcyfr-labs/dcyfr-chrome-utilitiesDistinctive, 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 stack next.