CardTopic
An accordion-style row card for displaying a topic (subject/chapter) within a course. Supports default state with optional progress tracking and a blocked state for locked content with an availability date. Uses the Collapsible component internally with accordion animation.
Examples
In progress
The default state with a partially completed progress bar.
Preview
Lesson list goes here
Completed
Pass progress={100} to show the “Concluído” label with a full green bar.
Preview
No progress indicator
Omit CardTopicProgress when progress tracking is not applicable.
Preview
Blocked
Set variant="blocked" with a required availableDate. The progress area automatically shows a lock badge with the date. The number badge and title are visually muted. The trigger is non-interactive — no click, no chevron animation.
Preview
API Reference
Sub-components
| Sub-component | Description | Usage notes |
|---|---|---|
| CardTopic | Root collapsible container. Provides variant context to all sub-components and applies the accordion animation | Always the outermost wrapper. Accepts all Collapsible props (open, defaultOpen, onOpenChange) |
| CardTopicTrigger | Full-width clickable row that toggles the collapsible. Uses a flex row (the first child flexes to fill the available space) to position content. Disabled and non-interactive when variant="blocked" | Place two CardTopicColumn children: first for number + title, second for progress + count |
| CardTopicColumn | Flex row container for grouping sub-components side by side. The first child flexes to fill the available space while the rest stay at their natural size | Use the first for CardTopicNumber + CardTopicTitle, the second for CardTopicProgress + CardTopicCount |
| CardTopicNumber | Circular numbered badge. Muted background and text when variant="blocked" | Pass the sequential number as children, e.g. 1 |
| CardTopicTitle | Topic name. flex-1 so it fills the left column. Muted text when variant="blocked" | Pass the topic name as children |
| CardTopicProgress | Displays progress status. In-progress shows percentage + bar; completed shows “Concluído” + green bar; blocked shows lock icon + date. Renders nothing if progress is omitted and variant is not blocked | Pass progress (0–100) for default variant. Omit or leave empty for blocked variant — date is injected from context |
| CardTopicCount | Item count label with the animated chevron icon rendered internally. Chevron rotation is suppressed when variant="blocked" | Pass the count string as children, e.g. 10 items |
| CardTopicContent | Collapsible content area. Animated with accordion (slide up/down). Applies px-4 pb-4 padding by default | Place lesson cards, lists, or any content here. Omit entirely for blocked topics |
CardTopic
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "blocked" | "default" | Controls the visual state of the entire card and all variant-aware sub-components. |
| availableDate | string | - | Required when variant="blocked". Displayed in the lock badge inside CardTopicProgress (e.g. "05/03"). |
| defaultOpen | boolean | false | Initial open state (uncontrolled mode). |
| open | boolean | - | Controlled open state. Pair with onOpenChange. |
| onOpenChange | (open: boolean) => void | - | Called when the open state changes. |
| …props | CollapsibleProps | - | All Radix Collapsible root props are forwarded. |
CardTopicProgress
| Prop | Type | Default | Description |
|---|---|---|---|
| progress | number | - | Progress value 0–100. Clamped automatically. When omitted and variant is "default", the component renders nothing. When variant is "blocked", this prop is ignored. |
Last updated on