Card folder

When to use #

Use it for

Organised sets of cards.

Skip it when

One card.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/card-folder.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { CardFolder } from "@/components/ui/card-folder"

export function CardFolderDemo() {
  const [, setPicked] = useState("");
  return (
    <CardFolder
              label="Templates"
              cards={[
                { id: "t1", title: "Launch page", subtitle: "Hero, FAQ, contact" },
                { id: "t2", title: "Pricing", subtitle: "Plans and comparison" },
                { id: "t3", title: "Changelog", subtitle: "Release feed" },
                { id: "t4", title: "Sign in", subtitle: "Centered login" },
              ]}
              onSelect={(id) => setPicked(`Chose template ${id}`)}
            />
  );
}

API reference #

CardFolder

component

PropTypeDefault

label *string—

cards *readonly FolderCard[]—

onSelect((id: string) => void)—

defaultOpenbooleanfalse

classNamestring—

It is built on native elements and keeps aria-label, aria-hidden, aria-expanded and aria-controls in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.