TeachKit project

TeachKit / Design system

Documentation v0.1 · Released product

Design system contents

Components

Application navigation and identity

Keep discovery, creator actions, profile context and onboarding reachable from the shared application shell.

On this page

Purpose and usage

Keep discovery, creator actions, profile context and onboarding reachable from the shared application shell.

Anatomy

Anatomy
PartContract
BrandTeachKit identity
Primary destinationsRole-appropriate navigation
Course creationCreate or reuse a draft via API
Account menuSession context and actions
Phone menuSeparate expanded mobile state

Variants and configuration

Variants and configuration
Input or variantBehavior
Sessionnext-auth context
SubscriptionSource access hook and optional gating configuration
OnboardingUser/course-derived plus manual progress

State coverage

State coverage
StateImplemented behavior
TeacherCourse creation and editing context
StudentLearner destinations
PhoneMobile menu composition
Draft existsCreation can reuse existing draft

Interaction and composition

  • Keep actual role checks and backend authorization outside specimen fixtures.
  • Do not expose student or admin personal records to fill navigation.
  • Capture using a simulated owner session without authentication secrets.

Accessibility and readiness

Inspect icon-only control names, expanded state, outside dismissal, mobile focus and navigation reading order. Capture-only API responses do not test authenticated sessions, draft creation or sign-out.

Source references

Source references
FileResponsibility
src/components/MainNav.tsxRole-aware desktop and phone navigation
src/components/Footer.tsxSite footer
src/components/OnboardingBar.tsxPersistent creator guidance

Examples from the app

Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.

Learner · Screen · Light · Desktop · 2880 × 2000 px
Learner · Screen · Light · Desktop · Full Page · 2880 × 2614 px
Library · Screen · Light · Desktop · 2880 × 2000 px

Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1