Component Reference
This page demonstrates all available callout styles and MDX components used throughout the Compass documentation. Use it as a quick reference when writing new docs.
Callouts (Admonitions)
Callouts are used to highlight important information. Compass supports four types:
Info
Use for general information, tips, or background context.
This is an info callout. Use it to provide helpful context or background information to the reader.
Tip
Use for best practices, shortcuts, and recommended approaches.
This is a tip callout. Use it to highlight productivity tips or recommended ways of doing something.
Warning
Use for gotchas, deprecation notices, or non-critical cautions.
This is a warning callout. Use it when the reader should proceed carefully or be aware of a potential issue.
Danger
Use for destructive or irreversible actions only.
This is a danger callout. Use it only for actions that could result in data loss or cannot be undone.
Callout with Custom Title
You can override the default title of any callout:
Before starting this module, make sure you have the Admin or Manager role assigned to your account.
You can bulk-select items in any table by holding Shift and clicking the first and last row.
Code Blocks
Inline code: use backticks for file names, values, and short code references.
Bash
npm install
npm run start
JSON
{
"project": "Hotel Opening",
"budget": 500000,
"currency": "USD"
}
TypeScript
interface Project {
id: string;
name: string;
status: 'active' | 'completed' | 'archived';
budget: number;
}
Tables
| Column A | Column B | Column C |
|---|---|---|
| Value 1 | Value 2 | Value 3 |
| Value 4 | Value 5 | Value 6 |
| Value 7 | Value 8 | Value 9 |
Tabs
Use <Tabs> to show alternative views — role-based content, OS-specific steps, or different workflows.
Admin Instructions
As an Admin you can create, edit, and delete all projects in the system. Navigate to Settings → Projects to get started.
User Instructions
As a User you can view projects you've been assigned to. Navigate to Projects in the sidebar to see your list.
Manager Instructions
As a Manager you can approve project budgets and assign team members. Navigate to Projects → My Projects to begin.
Cards
Use <Card> for navigation tiles linking to related pages. Wrap in <CardGroup> to create a responsive grid.
Create a Project
Set up a new project from scratch or use a blueprint template.
Task Catalogs
Build reusable task templates for your project types.
Budget Estimator
Plan and track project budgets with detailed line items.
Users & Roles
Manage team access and permissions across the platform.
Steps
Use <Steps> for numbered, sequential procedures where the order matters.
Navigate to Projects
Go to the sidebar and click Projects. The projects list will appear in the main content area.
Click "New Project"
Select the + New Project button in the top-right corner of the page.
Fill in the Details
Enter the project name, select a blueprint template (optional), and set the target completion date.
Save and Launch
Click Create Project. You'll be redirected to the project dashboard where you can start adding tasks.
Accordion
Use <Accordion> for collapsible FAQ sections or optional reference content that doesn't need to be visible by default.
Standalone
A project blueprint is a reusable template that pre-populates a project with a standard set of tasks, team assignments, and milestones. Blueprints save time when creating projects that follow a known pattern (e.g., a Standard Hotel Opening has 300+ tasks pre-loaded).
Yes. Navigate to Project Settings → Budget and update the currency. Note that this will not recalculate existing budget items — only the display currency changes.
Accordion Group
Use <AccordionGroup> to visually group related accordions into a single bordered container:
Users with the Admin or Manager role. Standard Users can view projects but cannot create them.
There is no limit on the number of active projects. Completed and archived projects are moved to a separate view.
Yes — open the project's context menu (⋯) and select Duplicate Project. All tasks and structure are copied; team assignments are not.
Frame
Use <Frame> to display screenshots or images with a consistent border and optional caption.
Screenshot not yet available. Add static/img/screenshots/projects-dashboard.png when ready.
The Frame component is ready. Screenshots will be added to this page when images are available from the Compass application.
Dark Mode
All callouts, code blocks, and components support dark mode automatically. Toggle the theme using the 🌙 icon in the navbar to verify.