Component Library

This page showcases the reusable UI components available in this application.

Display Box

A standard box component for displaying content with various options including titles, tabs, and collapsible content.

Simple Display Box

Basic display box with a title.

Collapsible Box

Click the arrow icon in the header to collapse/expand this box.

Tabbed Box

Content in the first tab.

Content in the second tab.

Content in the third tab.

Slideout Component

A component that shows a trigger text with a togglable content area that slides in/out.

Click to show more information
Click for additional options

Search & Add Components

Components for searching items and adding new entries to a list.

Advanced Options

List Box

A component for displaying lists of items with loading states, empty states, and pagination.

Check-in Component

A component for logging check-ins on tasks, including comments and RPE ratings, with a fun fireworks animation.

Task with Check-in Example

Example Task: Design New UI Components
Due: Tomorrow at 5:00 PM
Create a set of reusable components for the application UI refresh.
Estimated: 4 hours
Design
Log Check-in

Catchlist Items

Catchlist items are the basic unit of the application. They represent actions or tasks that need to be completed.

Catchlist Item Examples

Call dentist to schedule appointment
2 days ago
Research electric vehicles for next car
1 week ago
Finish quarterly report
Yesterday
Order new office supplies
3 days ago
Completed: Today

Projects

Projects are collections of related tasks with a defined goal and timeline.

Project Examples

Website Redesign

Win Condition
Launch a beautiful, responsive website that increases user engagement by 20%
Reason
Current site is outdated and not mobile-friendly, leading to lost conversions
Next Step
Create wireframes for main landing pages

Subtasks

Product Launch: Mobile App

Win Condition
Successfully launch the mobile app with 5,000 downloads in first month
Reason
Mobile presence is critical for reaching new market segments
Next Step
Finalize feature list for MVP

Subtasks

Scheduled Items

Scheduled items are tasks that have been assigned to specific times in your calendar.

Scheduled Items Examples

Today Monday, June 10

9:00 AM
Team Stand-up Meeting
30 min
2:00 PM
Client Demo High Priority
90 min

Present new features to ABC Company

Tomorrow Tuesday, June 11

10:00 AM
Project Planning Session
2 hours

Planning session for the new mobile app features

3:00 PM
One-on-One with Manager
30 min

Weekly check-in meeting to discuss progress and goals