Design System

A showcase of the design system components and patterns

OverviewAI GuideTypographyComponentsLayoutsPatternsColors & AnimationsAdvancedAdditionalApp ShellSchedulingRich Text Editor

Additional UI Patterns

History Timeline

History Timeline Example
Display a timeline of changes to an entity with collapsible details
Contact History
BJ
Bob Johnson
Jan 3, 2023, 09:15 AM
update
JS
Jane Smith
Jan 2, 2023, 02:30 PM
update
JD
John Doe
Jan 1, 2023, 12:00 PM
create

Usage:

<HistoryTimeline
  title="Contact History"
  items={[
    {
      id: "1",
      timestamp: "2023-01-01T12:00:00Z",
      user: {
        id: "user1",
        name: "John Doe",
      },
      action: "create",
      summary: "Contact created",
    },
    {
      id: "2",
      timestamp: "2023-01-02T14:30:00Z",
      user: {
        id: "user2",
        name: "Jane Smith",
      },
      action: "update",
      changes: [
        { field: "name", oldValue: "John Smith", newValue: "John Doe" },
        { field: "email", oldValue: "john@example.com", newValue: "john.doe@example.com" },
      ],
    }
  ]}
/>

Document Attachment

Document Attachment Example
Upload, view, and manage documents attached to an entity
Contact Documents
Documents attached to this contact
NameTypeSizeUploadedActions
Contract.pdfPDF2.5 MB1/1/2023
Profile.jpgJPEG512 KB1/2/2023
Report.docxVND.OPENXMLFORMATS-OFFICEDOCUMENT.WORDPROCESSINGML.DOCUMENT1.2 MB1/3/2023

Usage:

<DocumentAttachment
  title="Contact Documents"
  description="Documents attached to this contact"
  documents={documents}
  onUpload={handleUpload}
  onDelete={handleDelete}
  onView={handleView}
  onDownload={handleDownload}
/>

Task Progress

Task Progress Example
Display progress of asynchronous tasks with steps and actions
Generating Report
Please wait while we generate your report
Running
Progress65%

Steps

  • Collecting data

  • Processing data

  • Generating PDF

Usage:

<TaskProgress
  taskId="task-123"
  title="Generating Report"
  description="Please wait while we generate your report"
  status="running"
  progress={65}
  steps={[
    { id: "step1", name: "Collecting data", status: "completed" },
    { id: "step2", name: "Processing data", status: "running" },
    { id: "step3", name: "Generating PDF", status: "pending" },
  ]}
  onCancel={handleCancel}
/>

Notifications

Notifications Example
Display toast notifications and notification center

Toast Notifications

Notification Center

Notification Center component removed

Usage:

// Show a notification
showNotification({
  title: "Success",
  description: "Operation completed successfully",
  type: "success",
  action: {
    label: "View",
    onClick: handleView,
  },
});