Skip to content

Onboarding

Getting Started

From zero to your first agent interface in three steps. Then six composable recipes for the patterns you actually need.

Installation

01

Install

Private preview. Access is granted per team; once you have it, one registry line and one install.

# .npmrc
@danagraph:registry=https://npm.pkg.github.com

# then, with a GitHub token that has read:packages in NODE_AUTH_TOKEN
npm install @danagraph/design-system
02

Import tokens

Load the Bauhaus token layer into your app root.

// app/layout.tsx
import "@danagraph/design-system/tokens/index.css";
03

Use a component

Every component is a named export. No default exports, no barrels.

import { AgencyIndicator } from "@danagraph/design-system";

<AgencyIndicator
  level={2}
  label="Recommendation"
  interactive
  showScale
/>

Theming

Three-layer token architecture

Tokens cascade from raw primitives to semantic meanings to component overrides. Override any layer without breaking the chain.

Primitives

--bh-*

Raw color values, type scales, spacing units. The atoms.

--bh-red--bh-blue--bh-yellow--bh-black--bh-gray-3

Semantic

--ds-*

Meaning-mapped tokens. Agency is always red. Temporal is always blue.

--ds-color-agency--ds-color-temporal--ds-surface-overlay--ds-text-muted

Component

--bh-node-*

Scoped overrides for specific component families.

--bh-node-bg--bh-node-border--bh-input-border-focus--bh-outcome-positive

Full token reference → Foundation / Tokens

Tooling

Component Registry API

Every component is catalogued in a machine-readable JSON registry. Use it for CLI tools, IDE extensions, documentation generators, or custom scaffolding.

# Fetch the full registry
curl https://design.dana.xyz/registry.json

# Schema validation
curl https://design.dana.xyz/registry-schema.json
// Each component entry includes:
{
  "name": "AgencyIndicator",
  "slug": "agency-indicator",
  "category": "pattern",
  "subcategory": "agency-control",
  "status": "stable",
  "tokens": ["semantic", "type", "motion", "border"],
  "variants": ["inline", "bar", "badge"],
  "sizes": ["sm", "md", "lg"],
  "principles": [1, 5, 6],
  "related": ["AgencyStack", "PermissionMatrix"],
  "source": "components/patterns/AgencyIndicator.tsx",
  "props": [...]
}

379 Components

95 UI primitives + 104 AI-native patterns + 180 finance components, fully typed and documented.

JSON Schema

Validate registry entries with the published JSON Schema 2020-12 spec.

Build-time Generated

Registry JSON is regenerated on every build from the TypeScript source of truth.

Storybook

Interactive stories for all 379 components — live props, dark/light themes, accessibility audit, and auto-generated docs. Every component ships with a Default and Playground story. Coming soon as an internal hosted instance.

Stories for all UIFinance componentsAI patternsDark / LightA11y addonAutodocs

Recipes

Six composable patterns

Each recipe composes 3–5 components into a production pattern. Copy the structure, swap the data source, ship.

Recipe 01

Chat interface

Streaming conversation with role indicators, tool-call expansion, and citation provenance.

ChatMessageStreamingResponseCitationCardContextWindow
<ChatMessage role="assistant" model="claude-4">
  <StreamingResponse stream={response}>
    {(text) => <Markdown>{text}</Markdown>}
  </StreamingResponse>
</ChatMessage>
Recipe 02

Agent dashboard

Multi-agent orchestration view with timeline, status, and handoff visualization.

AgentCardAgentTimelineA2AHandoffMCPServerStatus
<AgentTimeline agents={pipeline.agents}>
  {(agent) => (
    <AgentCard
      name={agent.name}
      status={agent.status}
      authority={agent.authority}
    />
  )}
</AgentTimeline>
Recipe 03

Consent ceremony

Multi-step permission granting with visible authority levels and revocation.

ConsentFlowCeremonyGateVaultBoundaryPermissionMatrix
<ConsentFlow
  scope="calendar.write"
  ceremony="elevated"
  onGrant={handleGrant}
  onRevoke={handleRevoke}
>
  <VaultBoundary label="Calendar Access" />
</ConsentFlow>
Recipe 04

Tool execution trace

Expandable tool-call cards with input/output panels and execution timing.

MCPToolCallAuditTrailDataTagTemporalScale
<MCPToolCall
  tool="search_vault"
  status="success"
  duration={47}
  input={{ query: "Q3 results" }}
  output={{ matches: 12 }}
/>
Recipe 05

Confidence display

Grounding indicators, model tags, and confidence meters for transparent AI output.

ConfidenceMeterGroundingIndicatorModelTagDataTag
<ConfidenceMeter value={0.87} qualifier="high">
  <GroundingIndicator
    level="verified"
    source="Annual Report 2025"
  />
</ConfidenceMeter>
Recipe 06

Learning feedback loop

Visible system learning: what was observed, inferred, and what changed.

LearningLedgerEvalRadarFeedbackSignalIterationDiff
<FeedbackSignal
  onPositive={handleThumbsUp}
  onNegative={handleThumbsDown}
/>
<LearningLedger entries={model.learnings} />