Slidecard

Stacked status cards for agents, workflows, or dashboards

Preview

compagin Planner

90s

This is a sample description text for the card header component.

google adds

SaaS

Risk Analysis

120s

This is a sample description text for the card header component.

Issue Tracker

45s

This is a sample description text for the card header component.

Predbuilt Agents,Tuned to Your Workflows

Card – wraps the stacked skeletons and keeps sizes in sync with the outer shell.
Skeleton – individual tiles showing a title, description, badges, and optional chips.
Slider – compact pill labels that call out sub-tasks or channels.
Badge – dual-icon badge that communicates state or duration.
CardFooter – sticky footer with a descriptive line and icon button affordance.

Swap the lucide icons passed to each Skeleton or the footer button to match the story you want to tell.
Adjust the title, desc, and time props for every Skeleton to highlight unique milestones.
Use the optional children slot on Skeleton to inject additional Slider chips or any React node.
Override Tailwind classes via the className prop to change colors, depth, or stacking order.

Component	Props	Notes
`Slidcard`	—	Renders the opinionated stack of Skeleton cards. Clone it when you want the exact hero layout.
`Skeleton`	`titledesctimevarianticonchildren?className?`	Use directly when you need a single card with custom content or stacking order.
`Slider`	`titleclassName?`	Tiny rounded pills that highlight sub-tasks or target channels.
`Badge`	`varianttimeclassName?`	Wraps the dual-icon time indicator. Unknown variants fall back to a neutral palette.
`CardFooter`	`desc?icon?`	Persistent CTA area—the icon button already carries hover states.

Pair it with a muted gradient or photo background—the transparent edges let the card feel layered.
Because transforms are hard-coded, keep the component on GPU-accelerated surfaces for smoother animation.
Respect pointer events: only the footer icon is clickable by default, so wrap the entire block with a link if you want a single action.