Onboarding
Onboarding and getting-started blocks for shadcn/ui. Checklists, step progress, workspace setup, timelines, and activity feeds. Built for shadcn/ui.
A compact getting-started checklist built with shadcn/ui Collapsible, DropdownMenu and Button. Each step expands to reveal a description and a call-to-action that marks it complete, while a circular progress ring and counter track how far the user has come. Ideal for in-app product onboarding and activation flows.
A step-by-step workspace setup flow using shadcn/ui Button and a themed progress bar. Steps unlock one at a time, the active card is highlighted with its own action button, and completed steps are struck through with a check icon. Great for first-run studio or workspace configuration.
A numbered setup list built with shadcn/ui Progress and selectable card buttons. Clicking a card sets it as the active step, earlier steps show a filled check, and a header progress bar reflects the step counter. Includes a help callout with a support email, suited to product launch or show-setup wizards.
A quick-start guide built with the shadcn/ui Accordion and Button components. Each step is an accordion item with an icon, short explanation and an action that advances to the next step; upcoming steps stay disabled until the current one is finished. A compact pattern for developer or creator onboarding.
A vertical activity feed that lists recent team actions with avatar initials, a connecting timeline rail and relative timestamps. Built with shadcn/ui styling tokens and utility classes only, it adapts to any theme and works well as a recent-activity panel on project or workspace overview pages.
A vertical status timeline that shows completed, running and upcoming stages of a multi-step process such as an episode release or deployment. Uses shadcn/ui theme tokens with check icons, a pulsing in-progress dot and muted upcoming markers, making it a lightweight progress tracker for pipelines and approval flows.
A multi-stage pipeline view built with shadcn/ui Progress, Accordion and Button. Three stage bars animate as the final import step completes, a spinner switches to a check on completion, and a collapsible logs section lists timestamps and runtimes per stage. Useful for data migrations, imports and background job status screens.