IDD

IDD is an industrial-styled React component library using a sharp, monospaced visual language.

Components Showcase

• https://idd.surge.sh/

Installation

npm install idd-ui

Usage

import { Button, Dialog, TextInput } from "idd-ui";
import "idd-ui/styles.css";

function Example() {
  return (
    <div>
      <TextInput placeholder="Email" value="" onChange={() => {}} />
      <Button variant="primary">Save</Button>
    </div>
  );
}

LLM Metadata

• Web guidance endpoint: /llms.txt
• npm guidance file: idd-ui/llms.txt
• Extended guidance doc: idd-ui/LLMS.md
• Required defaults for generated UIs:
  • Use Martian Mono as the only font family.
  • Create hierarchy with font weights (for example 400, 500-600, 700).
  • Always include a user-visible light/dark theme toggle.

Available components

• Accordion
• Alert
• Avatar
• Breadcrumb
• Button
• Card
• Checkbox
• CodeBlock
• DataTable
• Dialog
• Divider
• Field
• Pagination
• Panel
• Pill
• Popover
• Progress
• Radio
• SectionTitle
• Skeleton
• SelectInput
• Switch
• Tabs
• TextArea
• TextInput
• Tooltip
• StatCard