Skip to content

ROADMAP.md

Latest commit

 

History

History
72 lines (56 loc) · 3.46 KB

ROADMAP.md

File metadata and controls

72 lines (56 loc) · 3.46 KB
Raw

Component Implementation Roadmap

This document outlines the priority tiers for implementing the remaining 39 target UI components in the desygen Design System.

🛑 Priority 1: Core Foundation & Form Controls (High Priority)

These form the essential building blocks for user input forms and interactive actions. Crucial for almost 90% of basic MVPs.

  • button (Implemented): The primary interactive component for actions.
  • input (Implemented): Standard text fields for user entry.
  • label: Text descriptors for form fields, essential for accessibility.
  • checkbox: For multi-select options.
  • radiobutton: For single-select options.
  • textarea: For multi-line text input.
  • select: Dropdown choice selections.
  • switch: Toggle switches for boolean states (active/inactive).
  • form: Wrapper to manage validation states, field groups, and submission.

📦 Priority 2: Layout & Data Containers (Medium-High Priority)

Essential for organizing content visually, structuring page layouts, and presenting raw data clearly to users.

  • card: Content container with shadow, border, headers, and body sections.
  • table: Grid presentation of structured tabular data.
  • tabs: Toggle views within the same section to save page space.
  • separator: Simple divider lines for visual grouping.
  • scrollarea: Custom scrollable container to maintain layout heights.
  • avatar: Circle profile placeholders for user icons or initials.
  • badge: Pill-shaped status indicators (e.g., "Active", "Pending").
  • skeleton: Loading placeholder components to improve perceived performance.

🔔 Priority 3: Feedback, Overlays & Navigation (Medium Priority)

Components for user notification, overlay modals, and menu/route navigation.

  • alert: Simple inline callouts for status feedback (Info, Warning, Error).
  • toast: Short-lived notification banners positioned at the edges.
  • sonner: Premium, stackable toast system.
  • dialog: Centered modal window overlay for actions.
  • popover: Floating overlay anchored to a trigger element.
  • tooltip: Hover details for icons or buttons.
  • sheet: Modals sliding in from the sides (e.g., drawers, mobile navigation menus).
  • sidebar: Collapsible navigation container for application control panels.
  • breadcrumbs: Navigational aid showing the page hierarchy.
  • navigationmenu: Top-bar navigation list with hover dropdowns.

⚡ Priority 4: Advanced Interactivity (Low-Medium Priority)

Components that enhance layout flow, user selection controls, and screen-space management.

  • accordion: Collapsible stacked panels (excellent for FAQs).
  • alert-dialog: Explicit modal dialogues requiring confirmation (e.g., delete confirmation).
  • dropdown: Action lists appearing below triggers (e.g., user profiles).
  • drawer: Slide-up sheet (usually on mobile) for options.
  • progress: Linear indicators showing progress percentage.
  • slider: Range selection inputs.
  • collapsible: Expand/collapse container helper.
  • resizable: Panels that users can drag to resize.
  • toggle: Button state togglers.
  • menubar: Desktop-like menu bars.

📊 Priority 5: Specialized Components (Low Priority)

Highly complex, custom components that require substantial logic, dependencies, or specialized libraries.

  • chart: Visual data representations (bar, line, pie charts).
  • carousel: Slide viewer for displaying multiple media contents.