Skip to content
Dethink Components
Dethink studio

Overview

Open code · 73 components · 19 recipes

A component workbench for token-themed product UI.

Every component, every state, every recipe — live on one surface. Copy the source; the --dt-* contract restyles everything, light or dark.

$ npx shadcn@latest add @dethink/button
✓ installed · tokens wired

73 components

Component matrix

State previews · open docs to interact

15 featured recipes

Components, composed into product flows

All 19 recipes

Foundations / design tokens

The --dt-* contract

One console pattern, two themes. Every surface, border, and text color below is a token — flip the theme in the header and the whole system restyles.

Color

  • background--dt-color-background
  • muted--dt-color-muted
  • border--dt-color-border
  • foreground--dt-color-foreground
  • primary--dt-color-primary
  • info--dt-color-info
  • success--dt-color-success
  • destructive--dt-color-destructive

Type

Display / 52Space Grotesk
Heading / 22Component matrix
Body / 16Inter carries every paragraph, label, and UI string.
Mono / 13const contract = "--dt-*";

Radius & elevation

  • sm
  • md
  • lg
  • pill