Skip to content
Pebble Pro is here at $49 one timeSee what’s included ↗
Pebble
ComponentsDocsMCPPricing
⌕ Find a component↗Log in
All components 673

Categories

Core inputs & forms46Buttons & actions33Navigation36Overlays & feedback49Data display33Charts & data viz40Cards & layout43Marketing blocks38App shells & pages37AI interfaces40Text & typography effects33Backgrounds & visual effects38Motion & transitions32Numbers & counters32Media34E-commerce333D & interactive36Themed sets40
Start with the essentials.Installation guide ↗Connect your agent ↗
← All componentsCards & layout

Course Card

Online course card: drawn cover, title, instructor, lesson/time/module chips, a progress ring with Lesson 7 of 14, the next lesson with a Continue key, a modules preview with done ticks, and an enrolled vs not-enrolled state.

Preview

Beginner

Everyday photography, from light to finished set

Priya Raman · Photographer
  • 14 lessons
  • 3 h 17 min
  • 5 modules
43%
Lesson 7 of 14Warm and cool palettes20 min

Modules

  1. Seeing light (done)2/2
  2. Framing (done)3/3
  3. 3Colour (in progress)1/3
  4. 4Street0/3

+1 more module

All levels

Wheel-thrown pottery: your first set of bowls

Tomas Avelar · Ceramicist
  • 9 lessons
  • 2 h 9 min
  • 4 modules
$64.00

Modules

  1. 1Clay and tools2 lessons
  2. 2Centering2 lessons
  3. 3Your first cylinder3 lessons
  4. 4Glazing2 lessons

Install

Pro source requires Pebble Pro. Try the full preview above.

Props

PropTypeDefaultDescription
titlestring—Course title; names the card.
instructor{ name; role?; avatar? }—Shown under the title.
coverReactNode—Drawn cover (decorative).
levelstring—Chip on the cover, e.g. Beginner.
modules{ id; title; lessons: { id; title; minutes }[] }[]—Course outline; totals and the next lesson are derived from it.
completedstring[][]Ids of finished lessons.
enrolledbooleanfalseProgress and Continue, or price and Enroll.
pricenumber—Shown when not enrolled; 0 reads Free.
currency / localestring"USD" / "en-US"Price formatting.
onEnroll / onPreview() => void—Not-enrolled actions.
onContinue(lesson) => void—Called with the next lesson.
previewCountnumber4Modules listed before "+n more".

Pro component

Try the full preview above. Editable source and build guides require Pebble Pro.

Buy Pebble Pro — $49How source access works ↗
Pebble

Small details.
Better interfaces.

React components to explore, make your own, and build on.

Library

  • Components
  • Installation
  • Pricing

Resources

  • For agents
  • About
  • Support

Legal

  • License
  • Terms
  • Privacy
  • Final sale

Built by Pebble

A product of Praxys Solutions LLC ↗

Pebble Pro is live

$49 one time, lifetime updates ↗