dt-design-system/packages/react

@dangerousthings/react

React web components for the Dangerous Things design system — 20 themed components wrapping @dangerousthings/web CSS with React APIs matching @dangerousthings/react-native for cross-platform parity.

Install

npm install @dangerousthings/react

Peer Dependencies

npm install react react-dom @dangerousthings/tokens @dangerousthings/web

Setup

Wrap your app with DTWebThemeProvider and import the web CSS bundle:

import "@dangerousthings/web";
import { DTWebThemeProvider } from "@dangerousthings/react";

export default function App() {
  return (
    <DTWebThemeProvider brand="dt" theme="dark">
      {/* your app */}
    </DTWebThemeProvider>
  );
}

The provider sets data-brand and data-theme attributes on a wrapper div and exposes brand/theme via React context.

Components

Bevel & Layout

Component	Description
DTCard	Beveled card with header, progress bar, and mode colors
DTButton	Beveled button with variant colors
DTLabel	Top-right beveled label with status colors
DTChip	Compact labeled element
DTMediaFrame	Diagonal beveled frame for images
DTModal	Modal dialog with beveled corners
DTDrawer	Side drawer with edge bevels
DTHexagon	Decorative hexagon SVG shape

Forms

Component	Description
DTTextInput	Sharp-cornered input with focus glow
DTCheckbox	Beveled checkbox with opposing corner cuts
DTSwitch	Angular toggle switch
DTRadioGroup	Hexagonal radio buttons
DTQuantityStepper	Beveled +/- increment buttons
DTSearchInput	Search-styled text input

Layout & Animation

Component	Description
DTProgressBar	Angular progress bar with optional label
DTAccordion	Collapsible sections with accent border
DTStaggerContainer	Staggered scale-in entrance animation for children
DTBadgeOverlay	Absolute-positioned badge wrapper

Filter & Feature

Component	Description
DTMenu	Dropdown menu with item variants
DTFeatureLegend	Product feature grid with icons and rotated labels
DTMobileFilterOverlay	Full-screen slide-up filter overlay with backdrop
DTGallery	Image gallery

Animation Hooks

Hook	Description
useScaleIn	Scale 0 to 1 entrance animation
usePulse	Looping opacity pulse animation

Usage Examples

import { DTButton, DTCard, DTTextInput } from "@dangerousthings/react";

// Button with variant
<DTButton variant="normal" onClick={handleClick}>
  Scan NFC
</DTButton>

// Card with title and progress bar
<DTCard title="PRODUCT" variant="emphasis" progress={60}>
  <p>60% progress</p>
</DTCard>

// Text input
<DTTextInput variant="normal" label="Username" />

Theme Utilities

import { useDTWebTheme } from "@dangerousthings/react";

const { brand, theme } = useDTWebTheme();
// brand: "dt" | "classic"
// theme: "dark" | "light"

Variant Utilities

import { getVariantClass, variantToClassName } from "@dangerousthings/react";

getVariantClass("emphasis"); // mode class name for CSS
variantToClassName("warning"); // token-level variant mapping

Monorepo

Part of the DT Design System monorepo.

License

MIT