Component Organization

Components are organized into six functional categories. Each category uses shadcn/ui primitives as foundations and adds DRKM-specific composite components.

Navigation Components

These components help users understand location and move through the site.

| Component | Purpose | Based on | |---|---|---| | Sidebar Navigation | Shows site structure and current location | Collapsible menu | | Breadcrumbs | Shows current path (Home > Section > Page) | Text links with separators | | Section Navigation | Shows pages within current section | Vertical link list | | Page Header | Shows page title and metadata | Typography + metadata display | | Related Pages | Links to next logical pages | Card list |

Content Display Components

These components render human-written content from MDX files.

| Component | Purpose | Usage | |---|---|---| | MDX Content | Renders parsed markdown with typography styles | Page body content | | Heading Hierarchy | H1-H6 with consistent sizing and spacing | Content structure | | Prose Paragraph | Body text with optimized line-height and spacing | Content text | | Blockquote | Highlighted quotes or important statements | Emphasis | | Code Block | Syntax-highlighted code with line numbers | Code examples | | Inline Code | Monospace code within prose | Technical terms |

Data Display Components

These components render structured data from JSON files.

| Component | Purpose | Data Source | |---|---|---| | Decision Table | Shows decisions with metadata | decisions.json | | Risk Register | Shows risks with severity/probability | risks.json | | Requirement Table | Shows requirements with status | requirements.json | | Milestone Timeline | Shows milestones and progress | milestones.json | | Dependency Matrix | Shows technology dependencies | dependencies.json | | Team Roster | Shows team members and domains | team.json | | Changelog Entry | Shows dated changes with metadata | changelog.json |

Organizational Components

These components organize and compartmentalize information.

| Component | Purpose | Feature | |---|---|---| | Card | Container for grouped information | Border, padding, consistent styling | | Section Container | Wrapper for related content | Margin, typography context | | Alert/Callout | Highlighted information or warning | Color-coded by type (info, warning, error, success) | | Tabs | Switch between related content views | Click-to-switch tabs | | Accordion | Expandable/collapsible sections | Click-to-expand detail |

Status/Callout Components

These components communicate system state and important information.

| Component | Purpose | States | |---|---|---| | Status Badge | Shows page status (active, forming, draft) | Color + text | | Severity Indicator | Shows risk/requirement severity | Color + icon | | Metadata Display | Shows owner, date, last updated | Text with icons | | Notification | Alerts and messages | Info, success, warning, error |

Interactive Components

These components handle user interaction.

| Component | Purpose | Features | |---|---|---| | Button | Clickable action trigger | Primary, secondary styles, hover states | | Link | Navigation to another page | Underline, hover, active states | | Search Input | Full-text content search | Text input with autocomplete | | Filter Dropdown | Filter content by category | Select with options | | Copy Button | Copy code to clipboard | Icon button with feedback |

Component Design Rules

Visual Consistency

• All components use stone palette colors
• Spacing follows 4px grid system (8px base unit)
• Typography uses project font stack (Inter, system sans-serif)
• Borders 1px solid #E5E7EB

Interaction Standards

• All interactive elements have visible focus states
• Minimum touch target size: 44x44px
• Hover states: subtle background change or underline
• Keyboard navigation supported on all interactive elements

Accessibility Standards

• All components have proper ARIA labels
• Semantic HTML (buttons are , links are , etc.)
• Color not the only way to convey information (use icons, text, position)
• Sufficient color contrast (4.5:1 minimum)

Component Composition

Components are built as:

• 1. shadcn/ui primitives (buttons, dialogs, dropdowns) — copy-pasted into project
• 2. Project-specific wrappers adding DRKM styling
• 3. Composite components combining multiple primitives with logic

This approach maintains flexibility while enforcing consistency.