GHDS GH Design System
한국어 Theme

Getting Started

Install GHDS and render your first component on screen.

GHDS is a monorepo published as pnpm workspaces. Install the package for your framework along with the tokens.

Installation

# React app
pnpm add @ghds/react @ghds/tokens

# Framework-agnostic (Lit web components)
pnpm add @ghds/web-components @ghds/tokens

Import Token CSS Variables

Every component reads its color, spacing, radius, and other values from @ghds/tokens’s CSS variables. Import it once at your app’s entry point.

import '@ghds/tokens/css';

Load Fonts

GHDS font-family stacks reference self-hosted web fonts (Gochi Hand, Gaegu, Nunito Sans Variable, Pretendard) for English and Korean. Install and import the Fontsource packages so the named faces in the stacks resolve to actual font files — otherwise they silently fall back to system fonts.

pnpm add @fontsource-variable/nunito-sans @fontsource/pretendard @fontsource/gochi-hand @fontsource/gaegu
import '@ghds/tokens/css';
// Sketch / display
import '@fontsource/gochi-hand/400.css';
import '@fontsource/gaegu/400.css';
// Body / UI
import '@fontsource-variable/nunito-sans/wght.css';
import '@fontsource/pretendard/400.css';
import '@fontsource/pretendard/500.css';
import '@fontsource/pretendard/700.css';

See the Fonts guide for the full rationale, typeface choices, weight/payload guidance, and React Native notes.

Using it in React

import { Button } from '@ghds/react/button';

export function Example() {
  return <Button variant="primary">Hello</Button>;
}

Using it as a Lit Web Component

import '@ghds/web-components/button';
<gh-button variant="primary">Hello</gh-button>

Next Steps