FIGMA

Droplette

A typed React component library with design tokens, theming, and accessibility baked in — published as a versioned package and consumed across projects.

Year 2025
Role Design system, library architecture
FIGMA

Droplette

Droplette
Overview

Built on Radix primitives for behavior, styled with CSS variables for theming, and shipped with TypeScript types that catch misuse at compile time. Storybook for documentation, Vitest for behavior, axe for accessibility.

Stack: React, TypeScript, Radix UI, CSS variables, Storybook, Vitest, Changesets for versioning, published to a private npm registry.

Highlights
  • Tokens-driven theming: light, dark, and brand variants with no fork.
  • Accessibility tested in CI; no PR merges with axe failures.
  • Tree-shakeable build — apps only ship what they import.
Back to all work