Installation

Get up and running with @deepgram/styles in minutes. Choose CDN for quick prototypes or npm for production apps.

CDN (Quick Start)

The fastest way to start using Deepgram Styles. Add two stylesheet links to your HTML <head> and you're ready to go. No build step required.

unpkg

Add to your HTML <head> html 
<!-- Fetching latest version... -->

jsDelivr

An alternative CDN with global edge caching.

jsDelivr alternative html 
<!-- Fetching latest version... -->

Theme Utilities (optional)

The theme utilities are an ES module you can import directly from the CDN. They provide light/dark/system theme switching with localStorage persistence.

Theme utilities via CDN html 
<!-- Fetching latest version... -->

npm (Production)

Install as a dependency for version pinning, tree-shaking, and bundler integration. Works with any build tool — Vite, webpack, Parcel, esbuild, etc.

Install

Install both packages bash 
npm install @deepgram/styles @fortawesome/fontawesome-free

Or with other package managers:

pnpm / yarn bash 
pnpm add @deepgram/styles @fortawesome/fontawesome-free
# or
yarn add @deepgram/styles @fortawesome/fontawesome-free

Import in JavaScript / TypeScript

Import both stylesheets in your app's entry file. Your bundler will handle the CSS.

main.ts or main.js javascript 
import '@deepgram/styles';
import '@fortawesome/fontawesome-free/css/all.min.css';

Or link directly in HTML

Direct link (no bundler) html 
<link rel="stylesheet" href="node_modules/@deepgram/styles/dist/deepgram.css">
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">

Using with Tailwind CSS v4

If your project already uses Tailwind CSS v4, you can import the Deepgram theme CSS to get all design tokens as Tailwind utilities. This replaces the default stylesheet import.

Tailwind v4 integration css 
/* In your main CSS file */
@import "@deepgram/styles/theme";

/* This gives you:
 * - All Deepgram design tokens (--color-dg-*, --font-dg-*, --spacing-dg-*)
 * - Base styles
 * - Custom utilities (dg-gradient-border, dg-glow-cyan-green, etc.)
 * - Tailwind v4's @import "tailwindcss" is included
 */

Font Awesome Icons

Components use Font Awesome Free icons. Any icon from the free library works. Solid icons (fas) are used most often.

Icon usage html 
<!-- Solid icon -->
<i class="fas fa-play"></i>

<!-- Regular icon -->
<i class="far fa-bell"></i>

<!-- Brand icon -->
<i class="fab fa-github"></i>

Verify It Works

Paste this button into your page. If you see a styled green button, everything is working.

Test snippet html 
<button class="dg-btn dg-btn--primary">
  <i class="fas fa-check"></i>
  It works!
</button>
← This is what it should look like

Package Exports

The @deepgram/styles package exposes several entry points:

Import Description
@deepgram/styles Minified production CSS (default)
@deepgram/styles/expanded Non-minified CSS for debugging
@deepgram/styles/theme Tailwind v4 theme CSS with all tokens
@deepgram/styles/source Source CSS with @apply directives (for custom builds)
@deepgram/styles/react Typed React components
@deepgram/styles/utils Theme utility functions (setLight, setDark, etc.)
@deepgram/styles/design-system Raw YAML design tokens
@deepgram/styles/logo/* 12 SVG logo variants (adaptive, light, dark)