Skip to content

🧩 UI Components (MVP)

Core Components

1. Dashboards

Director Dashboard

  • Compliance status cards
  • Risk summary widget
  • Recent activity feed
  • Quick actions menu

Management Dashboard

  • Task list with filters
  • Essential Eight maturity chart
  • Team activity
  • Deadline calendar

2. Forms

Simple Forms Only

  • Text inputs
  • Dropdowns
  • Radio/checkboxes
  • File upload
  • Submit/cancel buttons

Validation

  • Required field markers
  • Inline error messages
  • Success confirmations
  • Loading states

3. Tables

Data Tables

  • Sortable columns
  • Basic filtering
  • Pagination
  • Export to CSV/PDF

4. Navigation

Desktop

  • Top navbar
  • Sidebar menu
  • Breadcrumbs
  • User menu

Mobile

  • Hamburger menu
  • Bottom tab bar (key actions)
  • Back navigation
  • Simplified options

Component Library

Use Existing Components

  • Tailwind UI patterns
  • shadcn/ui (React component library)
  • TanStack Table (for data tables)
  • Radix UI primitives
  • Native HTML elements

Don't Build

  • Custom date pickers
  • Complex charts (use Chart.js)
  • Fancy animations
  • Custom icons (use Heroicons)

Responsive Behavior

Mobile (< 768px)

  • Stack everything vertical
  • Hide non-essential columns
  • Larger touch targets (44px+)
  • Simplified navigation

Desktop (> 768px)

  • Multi-column layouts
  • Full data tables
  • Hover states
  • Keyboard navigation

Accessibility

MVP Requirements

  • Semantic HTML
  • ARIA labels where needed
  • Keyboard navigable
  • Color contrast 4.5:1
  • Focus indicators

Testing

  • Chrome DevTools audit
  • Keyboard-only navigation
  • Screen reader spot checks

Keep components simple. Use what exists. Don't reinvent.