HelixUIDNAProvider

HelixUIDNAProvider

import { wildtype, mutate, compose } from '@helixui/dna';
import { HelixUIDNAProvider, Button } from '@helixui/core';

const cool = mutate(wildtype(), { gene: 'accent', allele: 'cyan' });
const warm = mutate(wildtype(), { gene: 'accent', allele: 'orange' });
const hybrid = compose(cool, warm);

<HelixUIDNAProvider dna={hybrid}>
  <Button>This button is rendered under a hybrid DNA.</Button>
</HelixUIDNAProvider>

Nested DNAs

HelixUIDNAProvider works by setting CSS custom properties on its wrapping div. Nested providers compose by inheritance — the inner DNA wins for any gene it expresses. This makes it cheap to render side-by-side previews of multiple DNAs:

<HelixUIDNAProvider dna={parentA} inline>
  <PreviewCard /> {/* renders under parentA */}
</HelixUIDNAProvider>

<HelixUIDNAProvider dna={parentB} inline>
  <PreviewCard /> {/* renders under parentB */}
</HelixUIDNAProvider>

Install: @helixui/core

import { HelixUIDNAProvider } from '@helixui/core'

status: stable · since: 0.4.0

Tags: theme, dna, genome, provider

Anatomy

<HelixUIDNAProvider dna={...}>
  ⟨all components inside inherit the genome⟩
</HelixUIDNAProvider>

Layout

• display — block
• width — auto
• height — auto
• intrinsicSize — unstyled wrapper; pure CSS variable scope
• stackable — true
• fullBleed — false

Visual

A presentational wrapper that applies CSS variables for accent / chroma / radius / density / typography / surface / motion / lightness genes. Children re-render visually without React rerender — the gene change is just a style mutation.

Props

Name	Type	Default	Description
dna	DNA	—	Required. A DNA value from @helixui/dna — wildtype(), a preset, a mutation, or a bred child.
inline	boolean	false	Render the wrapper as inline-block (for compact previews).
...rest	HTMLAttributes<HTMLDivElement>	—	Native div attributes.

Slots

• children — the subtree that should render under this DNA

Tokens used

color.bg.surface.default, color.text.primary, font.family.sans

Accessibility

Notes

• The wrapping div sets data-theme only when the DNA’s lightness gene is fixed (light / dark). With auto the inherited theme is used.
• DNA changes animate the surface color via a CSS transition (220ms); respects prefers-reduced-motion.

Composes with

Component	Relation	Note
ThemeProvider	parent	ThemeProvider sets light/dark; DNAProvider tunes the genome on top.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

apply a custom theme genome

“wrap the app in a DNA with rounder radius”

<HelixUIDNAProvider dna={{ radius: 'round', density: 'cozy' }}>
  <App />
</HelixUIDNAProvider>

Related

• ThemeProvider