Skip to content
Dethink Components
Dethink studio

Overview

Open code · 93 components · 29 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

Features / from primitive to product

The details are built in.
The decisions stay yours.

A shared foundation for dashboards, internal tools, and AI interfaces. Start small, compose a full screen, and shape every part around your product.

  • 93components
  • 29recipes
  • MITlicensed code

  • Own the source

    Install individual components from the shadcn-compatible registry. Keep the source in your app, change the internals, and ship commercially under MIT.

    Open code · Pick what you need

    Install from the registry

  • One system, your identity

    Shared CSS variables control color, type, spacing, and radius. Switch between light, dark, and system themes, tune density, and support right-to-left layouts.

    Tailwind CSS v4 · Semantic tokens

    Make it your own

  • Accessible components

    Built with keyboard navigation, focus management, and accessible labels. Automated axe scans and browser interaction tests check representative examples; explore the evidence and its scope.

    Keyboard support · Accessibility checks

    View accessibility reports

  • Structure every screen

    Compose layouts with Box, Stack, Flex, and Grid. Add responsive sidebars, command menus, tabs, breadcrumbs, and a dock for navigating your product.

    Layout primitives · Navigation

    Build an application shell

  • Forms that handle the details

    Pair field labels, descriptions, and errors with inputs, async selection, tag entry, date and time pickers, and scheduling controls. Handle empty, loading, and invalid states.

    Validation states · Advanced inputs

    Compose a form

  • Make operational data usable

    Sort, filter, select, and paginate with a TanStack-powered data table. Combine tables with cards, timelines, avatars, badges, and feedback states.

    Data display · TanStack Table

    Explore the data table

  • Compose AI conversations

    Build chat interfaces with messages, a composer, streaming states, tool activity, and optional Markdown rendering. Connect the UI to your own model and backend.

    Chat primitives · Streaming UI

    Explore the chat components

  • Give interfaces a sense of motion

    Add animated docks, reveals, carousels, and transitions, or build a hero with shader backgrounds and particle text. Motion settings respect reduced-motion preferences.

    Motion · Shaders · Particle text

    Try the animated hero

  • Start with a complete flow

    Adapt dashboards, landing pages, login screens, and other recipes assembled from real components. Each recipe includes a live preview and source to make your own.

    Complete examples · Editable source

    Browse the recipes

  • Fit your React stack

    Use typed props and exported types in React 18 or 19. Follow setup guidance for Next.js and Vite, including styles, providers, dependencies, and client boundaries.

    TypeScript · React 18 + 19

    Set up your application

  • Understand what you ship

    Explore live states, API references, source, and the libraries behind each component. Component, keyboard, accessibility, and browser checks support ongoing development.

    Live docs · Dependency transparency

    Open the component docs

  • Bring your coding agent

    Install the Dethink Components skill so your agent can choose components, compose recipes, wire up the registry and theme, and verify the result against real APIs.

    Agent skill · Guided integration

    Get the agent skill

Available today through the registry. The library is in active development; APIs may change. Recipes demonstrate the interface and interactions — connect your own authentication and services.

Read the MIT license

93 components

Component matrix

State previews · open docs to interact

25 featured recipes

Components, composed into product flows

All 29 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 / 52Bricolage Grotesque
Heading / 22Component matrix
Body / 16Manrope carries every paragraph, label, and UI string.
Mono / 13const contract = "--dt-*";

Radius & elevation

  • sm
  • md
  • lg
  • pill