Your First Status Page

Create Your First Components

Components represent the services you want to display on your status page.

1. Navigate to Dashboard > Components
2. Click "Add Component"
3. Create a SERVICE component for grouping:
   • Name: Core Services
   • Type: SERVICE
   • Description: Our core infrastructure
4. Click "Create"

Now add an ENDPOINT component:

1. Click "Add Component" again
2. Fill in the details:
   • Name: API
   • Type: ENDPOINT
   • URL: Your API health endpoint (e.g., https://api.example.com/health)
   • Check Interval: 60 seconds
   • Parent Component: Select Core Services
3. Under Conditions, add:
   • Status Code equals 200
   • Response time less than 1000 ms
4. Click "Create"

Create a Status Page

1. Navigate to Dashboard > Status Pages
2. Click "New Status Page"
3. Fill in the basic info:
   • Name: My Company Status
   • Slug: status (this creates the URL /status/status)
   • Description: Real-time status of our services
4. Choose a template:
   • Modern - Clean, minimal design
   • Classic - Traditional status page layout
   • Terminal - Developer-focused dark theme
5. Click "Create"

Customize with Widgets

After creating the page, you'll be in the page editor.

Add a Status Overview Widget:

1. Click "Add Widget"
2. Select "Status Overview"
3. Configure:
   • Title: Leave empty for default
   • Show Description: Enable if you want to show component descriptions
4. Drag to position at the top

Add a Component List Widget:

1. Click "Add Widget"
2. Select "Component List"
3. This shows all your components with their current status

Add an Incident Feed Widget:

1. Click "Add Widget"
2. Select "Incident Feed"
3. Configure:
   • Show Resolved: Toggle to show/hide resolved incidents
   • Limit: Number of incidents to display

Configure Branding

1. Click the "Settings" tab in the editor
2. Upload your logo:
   • Light Mode Logo: For light backgrounds
   • Dark Mode Logo: For dark backgrounds
3. Set colors:
   • Primary Color: Your brand color
   • Background Color: Page background
4. Save changes

Preview and Publish

1. Click "Preview" to see how your page looks
2. Test both light and dark modes
3. When satisfied, change Status from Draft to Published
4. Click "Save"

View Your Status Page

Your status page is now live:

Access it at:

http://localhost:3000/status/{your-slug}

Share this URL with your users!