shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show what is in a course before anyone enrols with this course product card for Solid with Ark UI. A hairline frame with a plus mark on each corner holds two cells with a divider between them. The start cell has a drawn 16:9 cover, a Badge for the level, the title, the instructor as a button that opens a small Popover with an initials plate and a line about them, three totals ("4 modules", "21 lessons", "6 h 40 min") worked out from the curriculum, the price and the one Shine Button, "Add to bag". The end cell is the curriculum, an Accordion of four modules where one is open at a time, the first on load; each module shows its lessons with their lengths and a "Preview" button on the free ones that says there is no video in this demo. The cell keeps its height as modules open. Nothing is stored or bought. For online courses, workshops and any product that is a sequence of lessons.
FAQ
How do I change the curriculum?
Edit MODULES. Each module has a title and its lessons, each with a title, a length in minutes and a preview flag. The module's lesson count and time, and the course's three totals, are computed from the rows, so they cannot disagree with the list.
How does the module list behave?
Exactly one module is open at a time and opening another closes the first. Lesson rows have a fixed height and the cell a minimum height for the longest module, so opening one never moves the price or the Add button.
What does Preview do?
It says in the status line that there is no video in this demo. In your app, open a player or a dialog from preview with the lesson's video.
How does the instructor card work?
It is a popover on a button, so it opens with a click, Enter or Space and closes with Escape, on touch screens as well as with a mouse. It holds the name and a short line; the initials are decorative.
