Dew Design System
Development · Install Dewv2.0 · 5 steps

Run your first Dew component in under five minutes.

Everything you need to install @freshworks/dew-components in a React app — registry, install command, styles, theme, and a verification snippet.

Quick start5 steps · ~5 minutes

Install Dew in your React app.

PrereqsNode.js v18+GitHub PAT with read:packages scope
  1. 1

    Configure npm registry

    .npmrc
    @freshworks:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GIT_PERSONAL_TOKEN}
    export GIT_PERSONAL_TOKEN=<YOUR_GITHUB_PAT>

    Never commit .npmrc files or tokens to source control.

  2. 2

    Install

    npm install @freshworks/dew-components

    @freshworks/dew-styles is installed automatically as a dependency.

  3. 3

    Import styles

    App.tsx
    import "@freshworks/dew-styles/dew-assets.css";
import "@freshworks/dew-components/assets/dew-cmp-reset.css";
import "@freshworks/dew-components/assets/dew-cmp-lib.css";

    Packages use an exports map — do not include dist/ in import paths. It resolves automatically.

    ✓@freshworks/dew-components/assets/dew-cmp-lib.css
    ✕@freshworks/dew-components/dist/assets/dew-cmp-lib.css
  4. 4

    Apply a theme

    dew-light-theme

    Light

    dew-dark-theme

    Dark

    dew-system-theme

    System

    <html lang="en" class="dew-light-theme"></html>
  5. 5

    Verify

    App.tsx
    import { TextButton } from "@freshworks/dew-components";

function App() {
  return (
    <div className="dew-light-theme" style={{ padding: "2rem" }}>
      <TextButton variant="primary">Hello Dew</TextButton>
    </div>
  );
}

    If the component renders with Dew brand colors and typography, setup is complete.

Next

Browse the component library

Components with props, examples, and live previews.