Skip to content

Welcome to Gumdrop

Token-driven primitives for compact applications, in light and dark.

Quick start

Illustrative package setup for React 19 and Tailwind v4. The @gumdrop packages below are demo names, not published install targets. For this repository, follow its README.

terminalbash
pnpm add @gumdrop/system
pnpm add @gumdrop/tokens

Import the token layer in your root layout, then compose primitives:

app/layout.tsxtsx
import "@gumdrop/tokens/globals.css"import { ThemeProvider } from "@gumdrop/system" export default function RootLayout({ children }) {  return (    <html lang="en" data-theme="dark">      <body>        <ThemeProvider>{children}</ThemeProvider>      </body>    </html>  )}

Next steps

  • Follow Installation for requirements, package managers, and a verification step.
  • Read Design tokens to see the semantic families, brand presets, and the live reference table.
  • Browse the component library and try the shipped primitives in context.
  • Keep up with releases in the changelog — v2.4.0 introduced the brand presets powering this site.