Module Accordion

Collapsible course module header that reveals a timed lesson list underneath when expanded.

2
Typography systems3 lessons · 34 min
01Choosing a type scale9:12
02Vertical rhythm in the wild14:30
03Pairing display with body11:05

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Education5 } from "@/components/beste/piece/education5";

<Education5
  moduleIndex={2}
  moduleTitle="Typography systems"
  lessons={[
    {
      "title": "Choosing a type scale",
      "duration": "9:12"
    },
    {
      "title": "Vertical rhythm in the wild",
      "duration": "14:30"
    },
    {
      "title": "Pairing display with body",
      "duration": "11:05"
    }
  ]}
  expanded={true}
/>

More Education pieces

View all Education
24 lessons
Design systems for shipping teams
Beste Sözen6h 42m
58%

Course Card

education1

Course tile with a gradient thumbnail, instructor byline, duration, and an inline progress bar.

Lesson 6 · Hooks in depth
useEffect runs after the DOM commit, not during render.Cleanup runs before the next effect, and on unmount.
Ask Priya about the stale-closure example in office hours.

Lesson Highlights

education18

Saved-quote card grouping highlighter-tinted excerpts and an italic personal note beneath them.

Continue learningMemoizing expensive renders7 min left · Chapter 4

Continue Learning

education8

Resume-the-lesson banner with a play tile, eyebrow label, title, time remaining, and a Resume button.

Your learning path
Foundations
Patterns & hooks
Performance tuning
Shipping at scale

Curriculum Outline

education7

Vertical learning path with done, current, and locked steps connected by a colored rail.

Question 3 / 10
Which hook schedules an effect after the DOM is painted?

Quiz Question

education11

Multiple-choice card with a progress bar in the header, stem text, and four lettered option rows.

Composing tokens with Tailwind18 min
03

Lesson Row

education2

Single lesson entry with a status glyph on the left, title, duration, and padded index on the right.