Component Library

DoCurious has a component library of 100+ React components organized by domain. Components are built with React 19 + TypeScript, styled with the theme token system (CSS custom properties), and composed using Chakra UI v3 primitives.

Source directory: src/components/

Storybook: 55 stories (22 UI primitives + 33 domain components) with withMockData decorator. Run npm run storybook to view locally on port 6006.

---

UI Primitives

Directory: src/components/ui/

Core building blocks. Each is a themed wrapper around Chakra UI components, consuming design tokens via CSS variables. All 22 have Storybook stories.

Component	File	Storybook	Description
Alert	alert.tsx	Yes	Contextual feedback messages (info, warning, error, success)
Avatar	avatar.tsx	Yes	User profile images with fallback initials
Badge	badge.tsx	Yes	Status labels and category tags
Button	button.tsx	Yes	Primary, secondary, ghost, and destructive variants
Card	card.tsx	Yes	Surface container with themed shadow, border, backdrop blur
Checkbox	checkbox.tsx	Yes	Form checkbox with label
Collapsible	collapsible.tsx	Yes	Expandable/collapsible content sections
Dialog	dialog.tsx	Yes	Modal dialogs with overlay
Dropdown Menu	dropdown-menu.tsx	Yes	Context menus and action menus
Input	input.tsx	Yes	Text input field
Label	label.tsx	Yes	Form field labels
Progress	progress.tsx	Yes	Progress bars (XP, completion, upload)
Scroll Area	scroll-area.tsx	Yes	Custom scrollbar container
Select	select.tsx	Yes	Dropdown select menus
Separator	separator.tsx	Yes	Horizontal/vertical dividers (themed: solid, dashed, dotted)
Skeleton	skeleton.tsx	Yes	Loading placeholder shapes
Spinner	spinner.tsx	Yes	Loading spinner animation
Switch	switch.tsx	Yes	Toggle switch for boolean settings
Table	table.tsx	Yes	Data tables with sortable columns
Tabs	tabs.tsx	Yes	Tabbed navigation
Textarea	textarea.tsx	Yes	Multi-line text input
Tooltip	tooltip.tsx	Yes	Hover/focus tooltips

---

Layout

Directory: src/components/layout/

Structural components that define the app shell. Supports two navigation modes (sidebar and topnav) switchable per theme preset.

Component	File	Description
AppLayout	AppLayout.tsx	Root layout shell -- sidebar/topnav + content area
Header	Header.tsx	Top header bar with search, notifications, user menu
Sidebar	Sidebar.tsx	Collapsible side navigation with role-aware menu items
TopNav	TopNav.tsx	Alternative horizontal top navigation bar
CartDrawer	CartDrawer.tsx	Slide-out cart preview with item list and checkout link
ContextSwitcher	ContextSwitcher.tsx	Workspace context switcher (personal/school/admin)
UserSwitcher	UserSwitcher.tsx	Dev tool: switch between mock user personas

---

Common / Shared

Directory: src/components/common/

Reusable components used across multiple features.

Component	File	Description
AccountSwitcher	AccountSwitcher.tsx	Switch between linked accounts
Breadcrumb	Breadcrumb.tsx	Navigation breadcrumb trail
CookieConsentBanner	CookieConsentBanner.tsx	GDPR cookie consent banner
EmptyState	EmptyState.tsx	Placeholder for empty lists/pages
ErrorBoundary	ErrorBoundary.tsx	React error boundary with fallback UI
FeatureGate	FeatureGate.tsx	Conditionally render based on feature flags
GuidedTour	GuidedTour.tsx	Step-by-step onboarding tour overlay
LanguageSwitcher	LanguageSwitcher.tsx	i18n language selector (en/es/fr)
OnboardingWizard	OnboardingWizard.tsx	Multi-step onboarding flow
ReportButton	ReportButton.tsx	Content reporting trigger
ReportModal	ReportModal.tsx	Content reporting form dialog
RoleOnboardingWizard	RoleOnboardingWizard.tsx	Role-specific onboarding flow
Skeleton	Skeleton.tsx	Page-level loading skeleton
SkipNavLink	SkipNavLink.tsx	Accessibility skip-to-content link
ThemeSwitcher	ThemeSwitcher.tsx	Theme preset selector dropdown

---

Challenge

Directory: src/components/challenge/

Components for browsing, viewing, and managing challenges.

Component	File	Description
ChallengeCard	ChallengeCard.tsx	Challenge preview card (grid/list view)
ChallengeGrid	ChallengeGrid.tsx	Responsive grid of ChallengeCards
UserChallengeCard	UserChallengeCard.tsx	Active/completed challenge card for My Challenges
ChallengeDiscussion	ChallengeDiscussion.tsx	Challenge-specific discussion thread
ChallengeVersionHistory	ChallengeVersionHistory.tsx	Challenge edit/version changelog
ChallengeWelcomeModal	ChallengeWelcomeModal.tsx	Welcome dialog when starting a challenge
CreateChallengeModal	CreateChallengeModal.tsx	Form for user-submitted challenges

Challenge Finalization

Directory: src/components/challenge/finalization/

Multi-step flow for completing a challenge and documenting the experience.

Component	File	Description
FinalizationFlow	FinalizationFlow.tsx	Orchestrator for the finalization wizard
ExperienceRatingsStep	ExperienceRatingsStep.tsx	Rate the challenge experience
FinalUpdateStep	FinalUpdateStep.tsx	Add a final track record update
ReflectionStep	ReflectionStep.tsx	Guided reflection prompts
ScrapbookDetailsStep	ScrapbookDetailsStep.tsx	Add photos/media to the scrapbook
ProviderFeedbackStep	ProviderFeedbackStep.tsx	Feedback for activity providers
ReviewSubmitStep	ReviewSubmitStep.tsx	Review and submit final track record

---

Community

Directory: src/components/community/

Components for community browsing, membership, and collaborative features.

Component	File	Description
CommunityCard	CommunityCard.tsx	Community preview card
CommunityHeader	CommunityHeader.tsx	Community detail page header with stats
MemberList	MemberList.tsx	Community member listing with roles
FeedPost	FeedPost.tsx	Feed post card (Bucket List, Track Record, Discussion)
GoalCard	GoalCard.tsx	Community goal progress card
GoalDetail	GoalDetail.tsx	Detailed view of a community goal
CreateCommunityForm	CreateCommunityForm.tsx	Form to create a new community
AssignChallengeModal	AssignChallengeModal.tsx	Teacher tool: assign challenges to students
AssignedChallengeCard	AssignedChallengeCard.tsx	Card for teacher-assigned challenges

---

Gamification

Directory: src/components/gamification/

XP, badges, levels, streaks, and competitive features.

Component	File	Description
BadgeCard	BadgeCard.tsx	Individual badge display with rarity
BadgeGrid	BadgeGrid.tsx	Grid layout of earned/available badges
BadgeCollection	BadgeCollection.tsx	Filterable badge collection view
BadgeShowcase	BadgeShowcase.tsx	Featured badge display for profiles
NewBadgeModal	NewBadgeModal.tsx	Badge earned celebration modal
LevelProgress	LevelProgress.tsx	XP bar with current/next level
LevelUpModal	LevelUpModal.tsx	Level up celebration modal
XPGainToast	XPGainToast.tsx	Toast notification for XP earned
LeaderboardTable	LeaderboardTable.tsx	Ranked leaderboard display
LeaderboardOptIn	LeaderboardOptIn.tsx	Opt-in/out toggle for leaderboards
JourneyMap	JourneyMap.tsx	Visual exploration map of categories
StreakDisplay	StreakDisplay.tsx	Weekly streak flame indicator

---

Track Record

Directory: src/components/trackRecord/

Challenge documentation and progress tracking.

Component	File	Description
TrackRecordView	TrackRecordView.tsx	Full track record display
TrackRecordGallery	TrackRecordGallery.tsx	Photo/media gallery from track records
TrackRecordRevision	TrackRecordRevision.tsx	Track record version comparison
EntryForm	EntryForm.tsx	Create/edit a track record entry
EntryCard	EntryCard.tsx	Individual track record entry display
AddUpdateModal	AddUpdateModal.tsx	Quick update dialog for active challenges
CommentThread	CommentThread.tsx	Discussion thread on track records
SharingSettings	SharingSettings.tsx	Track record visibility controls
MediaUpload	MediaUpload.tsx	Photo/video upload for entries
ReflectionPrompts	ReflectionPrompts.tsx	Guided reflection questions
DocumentationGuideModal	DocumentationGuideModal.tsx	Expanded tips for creating strong TR documentation

---

Explore

Directory: src/components/explore/

Discovery and browsing features.

Component	File	Description
ActiveFilters	ActiveFilters.tsx	Applied filter chips with remove
CalendarView	CalendarView.tsx	Calendar-based event/challenge view
DealersChoice	DealersChoice.tsx	Gamified challenge discovery card game
EventCard	EventCard.tsx	Event listing card
EventDetailModal	EventDetailModal.tsx	Event detail overlay
EventDetailPanel	EventDetailPanel.tsx	Side panel event details
FilterPanel	FilterPanel.tsx	Explore filter panel
HorizontalChallengeRow	HorizontalChallengeRow.tsx	Horizontal scrolling challenge carousel
LocationFilter	LocationFilter.tsx	Location-based filtering

---

Filters

Directory: src/components/filters/

Shared filtering system used across Explore and other listing pages.

Component	File	Description
FilterButton	FilterButton.tsx	Filter toggle trigger button
FilterModal	FilterModal.tsx	Full-screen filter modal (mobile)
FilterSidebar	FilterSidebar.tsx	Sidebar filter panel (desktop)
FilterTopBar	FilterTopBar.tsx	Horizontal filter bar (topbar placement)
AppliedFilters	AppliedFilters.tsx	Applied filter chip display

---

Search

Directory: src/components/search/

Global search functionality.

Component	File	Description
SearchTrigger	SearchTrigger.tsx	Search bar/button in the header
SearchFilterBar	SearchFilterBar.tsx	Combined search + filter bar
LocationFilter	LocationFilter.tsx	Location search input with autocomplete

---

Social

Directory: src/components/social/

Social features, moderation, and safety.

Component	File	Description
ShareButton	ShareButton.tsx	Share content to communities
BatchShareModal	BatchShareModal.tsx	Share multiple items at once
BlockUserButton	BlockUserButton.tsx	Block/mute a user
CommunityModTools	CommunityModTools.tsx	Community moderator tools panel
JoinRequestFlow	JoinRequestFlow.tsx	Community join request workflow
SafetyResources	SafetyResources.tsx	Safety resources and help links

---

Gift

Directory: src/components/gift/

Challenge gifting system.

Component	File	Description
GiftCard	GiftCard.tsx	Gift display card (sent/received)
GiftModal	GiftModal.tsx	Gift sending dialog
GiftPermissionSettings	GiftPermissionSettings.tsx	Who can send gifts settings

---

Invitation

Directory: src/components/invitation/

Challenge invitations (doing challenges together, distinct from gifts).

Component	File	Description
InvitationCard	InvitationCard.tsx	Invitation display card
InviteModal	InviteModal.tsx	Send invitation dialog

---

Learning Paths

Directory: src/components/learningPaths/

Structured challenge sequences.

Component	File	Description
PathCard	PathCard.tsx	Learning path preview card
PathProgress	PathProgress.tsx	Learning path progress tracker

---

Portfolio

Directory: src/components/portfolio/

Portfolio building and display.

Component	File	Description
PortfolioCard	PortfolioCard.tsx	Portfolio preview card
PortfolioBuilder	PortfolioBuilder.tsx	Portfolio creation/editing tool

---

School

Directory: src/components/school/

School administration components.

Component	File	Description
CSVRosterImport	CSVRosterImport.tsx	Bulk student import from CSV
TeacherReflectionConfig	TeacherReflectionConfig.tsx	Teacher reflection prompt configuration
ReflectionDefaults	ReflectionDefaults.tsx	Default reflection prompt settings

---

Review

Directory: src/components/review/

Track record review and verification.

Component	File	Description
TrackRecordReviewModal	TrackRecordReviewModal.tsx	Review/verify a track record submission

---

Account

Directory: src/components/account/

Account management.

Component	File	Description
NotificationPreferences	NotificationPreferences.tsx	Notification channel preferences

---

Notifications

Directory: src/components/notifications/

Notification system.

Component	File	Description
NotificationCenter	NotificationCenter.tsx	Notification inbox panel

---

Payment

Directory: src/components/payment/

Payment and checkout.

Component	File	Description
PaymentForm	PaymentForm.tsx	Reusable payment method selection and card entry form
StripeCheckout	StripeCheckout.tsx	Stripe Elements integration for live card processing
CheckoutModal	CheckoutModal.tsx	Checkout flow dialog

---

Theme Editor

Directory: src/components/themeEditor/

Admin-only theme customization tool (available at /admin/theme-editor).

Component	File	Description
EditorShell	EditorShell.tsx	Theme editor layout container
ColorEditor	ColorEditor.tsx	Color token editing panel
TypographyEditor	TypographyEditor.tsx	Typography token editing panel
SpacingEditor	SpacingEditor.tsx	Spacing/density editing panel
StyleEditor	StyleEditor.tsx	Card, shadow, border style editing
BrandingEditor	BrandingEditor.tsx	Logo and app name editing
PresetSelector	PresetSelector.tsx	Theme preset picker with swatches
PreviewPanel	PreviewPanel.tsx	Live preview of theme changes
ThemeActions	ThemeActions.tsx	Save/reset/export actions

Theme Editor Controls

Directory: src/components/themeEditor/controls/

Reusable form controls used by the theme editor panels.

Component	File	Description
ColorTokenField	ColorTokenField.tsx	Color picker with hex/RGB input for individual design tokens
SelectField	SelectField.tsx	Dropdown selector for predefined token values
SliderField	SliderField.tsx	Range slider for numeric tokens (spacing, border-radius, etc.)
TextInputField	TextInputField.tsx	Text input for string tokens (font family, custom values)
TokenGroup	TokenGroup.tsx	Collapsible grouping container for related tokens

---

Admin

Directory: src/components/admin/

Admin-only components rendered within the platform admin context.

Component	File	Description
ImpersonationBar	ImpersonationBar.tsx	Fixed orange bar shown when an admin is impersonating a user; displays target user info and an "End" button to return to the admin session

---

Demo

Directory: src/components/demo/

Demo mode components used for sales presentations and stakeholder walkthroughs.

Component	File	Description
DemoModeBar	DemoModeBar.tsx	Fixed bar at the top of the viewport during demo mode; shows current persona, persona switch buttons, reset, and exit controls

---

Debug (Dev Only)

Directory: src/components/debug/

Development-only debug overlay. Toggled with Ctrl+Shift+D.

Component	File	Description
DebugPanel	DebugPanel.tsx	6-tab debug overlay (stores, routes, network, flags, theme, logs)
DebugPanelHeader	DebugPanelHeader.tsx	Debug panel header with tab navigation

---

Component Count Summary

Category	Count
UI Primitives	22
Layout	7
Common / Shared	15
Challenge	7
Challenge Finalization	7
Community	9
Gamification	12
Track Record	11
Explore	9
Filters	5
Search	3
Social	6
Gift	3
Invitation	2
Learning Paths	2
Portfolio	2
School	3
Review	1
Account	1
Notifications	1
Payment	3
Theme Editor	14
Admin	1
Demo	1
Debug	2
Total	~148