@roadlittledawn/docs-design-system-react
v0.12.0
Published
React components for documentation design system
Readme
@roadlittledawn/docs-design-system-react
React components for documentation content and MDX-driven sites.
Installation
npm install @roadlittledawn/docs-design-system-reactUsage
import {
Callout,
CodeBlock,
Card,
} from "@roadlittledawn/docs-design-system-react";Importing Styles
Import the component styles in your app:
import "@roadlittledawn/docs-design-system-react/styles.css";Components
Full component documentation with live examples, usage guidelines, and API documentation is available in Storybook:
View Component Documentation →
Next.js / React Server Components
Interactive components (e.g., Collapser, CollapserGroup, CodeBlock, Tabs, Popover, etc) are pre-marked with 'use client', so they work in Next.js App Router without any extra setup. Stateless components (e.g., Button, Callout, Card, CardGrid, Heading, Link, List, etc) have no directive and are fully usable as Server Components.
Dark Mode
The package includes built-in dark mode support. All components use transparent backgrounds (unless background color specified via props) in dark mode so they don't clash with your site's own dark theme.
Auto (zero-config)
Dark mode follows OS preference automatically when you import styles.css — no extra setup needed.
import "@roadlittledawn/docs-design-system-react/styles.css";
// Components automatically adapt to OS dark/light preferenceExplicit toggle
Add class="dds-dark" or data-dds-theme="dark" to any ancestor element:
<html class="dds-dark">
<!-- all components render in dark mode -->
</html><html data-dds-theme="dark">
<!-- same effect -->
</html>Force light mode
Override OS dark preference by adding class="dds-light" or data-dds-theme="light":
<html class="dds-light">
<!-- components stay light even if OS prefers dark -->
</html>Component-level dark islands
Apply dark mode to a specific section:
<div class="dds-dark">
<!-- only components inside this div use dark mode -->
</div>Hooks
useKeyPress
Listen for keyboard events.
const isPressed = useKeyPress("Escape");Full hook documentation is available in Storybook.
AI / LLM Integration
This package ships with AI-friendly docs so coding assistants can understand the component API without browser access.
USAGE.md (included in npm package)
A complete component reference with props tables and usage examples. Point your AI tool at it with one line:
# CLAUDE.md or equivalent
Component API docs: node_modules/@roadlittledawn/docs-design-system-react/USAGE.mdOr reference the raw file on GitHub in any AI context file.
/llms.txt (Storybook site)
The Storybook site serves a machine-readable component reference at /llms.txt per the llmstxt.org convention. Agents can fetch the full API reference from a single URL.
TypeScript types with JSDoc
All prop interfaces are exported and annotated with JSDoc so AI tools reading .d.ts files from node_modules get full prop descriptions and types.
Development
# Install dependencies
npm install
# Build the package
npm run build
# Watch mode for development
npm run dev