React Components

Typed React wrappers for every design system component. Boolean props for variants, ref forwarding, and className merging.

Installation

npm install @deepgram/styles react @fortawesome/fontawesome-free

React is a peer dependency — you likely already have it installed.

Setup

Import the CSS once in your app's entry point, then import components where you need them.

// app.tsx or main.tsx — import CSS once
import '@deepgram/styles';
import '@fortawesome/fontawesome-free/css/all.min.css';

// Any component file
import { Card, CardHeader, CardHeading, CardBody, Prose } from '@deepgram/styles/react';

function MyComponent() {
  return (
    <Card structured>
      <CardHeader>
        <CardHeading>Hello</CardHeading>
      </CardHeader>
      <CardBody>
        <Prose>This is a Deepgram-styled card.</Prose>
      </CardBody>
    </Card>
  );
}

Component API

Every React component follows the same pattern:

Boolean variant props Modifiers become boolean props. <Btn primary> renders .dg-btn.dg-btn--primary

className merging Pass className to add your own classes alongside the generated ones.

Ref forwarding All components use forwardRef — attach refs as usual.

Native props All extra props spread onto the underlying HTML element.

// HTML approach
<button class="dg-btn dg-btn--primary dg-btn--sm">Save</button>

// React equivalent
<Btn primary sm>Save</Btn>

// With additional props
<Btn primary sm className="my-custom-class" onClick={handleSave} disabled={loading}>
  Save
</Btn>

Examples

Buttons

import { Btn } from '@deepgram/styles/react';

<Btn primary>Get Started</Btn>
<Btn secondary>Learn More</Btn>
<Btn ghost>Cancel</Btn>
<Btn dangerGhost>Delete</Btn>
<Btn primary sm>Small Button</Btn>
<Btn iconOnly><i className="fas fa-play" /></Btn>

Cards

import { Card, CardImage, CardHeader, CardBody, CardFooter, CardHeading, Btn, Prose } from '@deepgram/styles/react';

<Card structured>
  <CardImage className="dg-card__image--medium">
    <img src="/photo.jpg" alt="Description" />
  </CardImage>
  <CardHeader>
    <CardHeading>Card Title</CardHeading>
  </CardHeader>
  <CardBody>
    <Prose>Card content goes here.</Prose>
  </CardBody>
  <CardFooter>
    <Btn primary>Action</Btn>
  </CardFooter>
</Card>

Forms

import { FormField, FormLabel, Input, FormHelper, Textarea, Checkbox, CheckboxLabel } from '@deepgram/styles/react';

<FormField>
  <FormLabel>Email</FormLabel>
  <Input type="email" placeholder="you@example.com" />
  <FormHelper>We'll never share your email.</FormHelper>
</FormField>

<FormField>
  <FormLabel>Message</FormLabel>
  <Textarea placeholder="Your message..." />
</FormField>

<CheckboxLabel>
  <Checkbox />
  I agree to the terms
</CheckboxLabel>

Layout

import { Section, SectionHeading, ConstrainWidth, GridMobileStack } from '@deepgram/styles/react';

<Section spacious>
  <SectionHeading>Features</SectionHeading>
  <ConstrainWidth>
    <GridMobileStack>
      <Card>...</Card>
      <Card>...</Card>
      <Card>...</Card>
    </GridMobileStack>
  </ConstrainWidth>
</Section>

Code Block with Syntax Highlighting

The CodeBlock component provides container styling for code snippets. For syntax highlighting, add prismjs as a dependency.

npm install prismjs

import { CodeBlock } from '@deepgram/styles/react';
import Prism from 'prismjs';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-tsx';
import 'prismjs/themes/prism-tomorrow.css';
import { useEffect } from 'react';

function CodeExample({ code, language }: { code: string; language: string }) {
  useEffect(() => { Prism.highlightAll(); }, [code]);

  return (
    <CodeBlock>
      <pre>
        <code className={`language-${language}`}>{code}</code>
      </pre>
    </CodeBlock>
  );
}

prismjs is an optional peer dependency — only needed if you use the CodeBlock component with syntax highlighting. You can substitute any highlighting library (e.g. Shiki, Highlight.js).

Theme Utilities in React

Use the theme utilities to build a toggle in your React app.

import { Btn, ActionGroup } from '@deepgram/styles/react';
import { setLight, setDark, setSystem, getTheme, onThemeChange } from '@deepgram/styles/utils';
import { useState, useEffect } from 'react';

function ThemeToggle() {
  const [theme, setTheme] = useState(getTheme());

  useEffect(() => {
    return onThemeChange(setTheme);
  }, []);

  return (
    <ActionGroup>
      <Btn primary={theme === 'light'} ghost={theme !== 'light'} sm onClick={setLight}>Light</Btn>
      <Btn primary={theme === 'dark'} ghost={theme !== 'dark'} sm onClick={setDark}>Dark</Btn>
      <Btn primary={theme === 'system'} ghost={theme !== 'system'} sm onClick={setSystem}>System</Btn>
    </ActionGroup>
  );
}

Component Reference

All exported components from @deepgram/styles/react:

Component	CSS Class	Variant Props
`Btn`	`.dg-btn`	`primary, secondary, ghost, dangerGhost, iconOnly, sm, collapse`
`Card`	`.dg-card`	`structured, compact, spacious, bordered`
`CardImage`	`.dg-card__image`	Use `className="dg-card__image--medium"`
`CardHeader`	`.dg-card__header`	—
`CardBody`	`.dg-card__body`	—
`CardFooter`	`.dg-card__footer`	—
`Section`	`.dg-section`	`compact, spacious, bordered, elevated, fieldset`
`Input`	`.dg-input`	`inline`
`Textarea`	`.dg-textarea`	—
`Checkbox`	`.dg-checkbox`	—
`Select`	`.dg-select`	—
`Radio`	`.dg-radio`	—
`Toggle`	`.dg-toggle`	—
`FormField`	`.dg-form-field`	`error, success`
`Alert`	`.dg-alert`	`info, success, warning, danger`
`Status`	`.dg-status`	`info, success, warning, error, primary, secondary`
`Spinner`	`.dg-spinner`	—
`Prose`	`.dg-prose`	`large, small, block`
`Hero`	`.dg-hero`	—
`CodeBlock`	`.dg-code-block`	`compact, tall, noScroll` — add `prismjs` for syntax highlighting
`Footer`	`.dg-footer`	—
`Newsletter`	`.dg-newsletter-container`	—