Project folder

Block

A folder card that opens to show its contents.

Installs components/ui/project-folder.tsxDepends on none beyond ReactMotion none in component source

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

When to use #

Use it for

Browsing projects.

Skip it when

Plain lists.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/project-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 { ProjectFolder } from "@/components/ui/project-folder"

export function ProjectFolderDemo() {
  const [, setPicked] = useState("");
  return (
    <ProjectFolder name="Atlas platform" count={24} tone={1} preview={["Roadmap.md", "API notes", "Launch plan"]} meta="Edited today" onOpen={() => setPicked("Opened Atlas platform")} />
  );
}

API reference #

ProjectFolder

component

PropTypeDefaultDescription

name *string—

count *number—How many items the project holds.

previewreadonly string[][]Titles of a few items, shown as papers peeking out.

tone1 | 2 | 3 | 4 | 5 | 61Which chart color tints the folder, 1 to 6.

hrefstring—

onOpen(() => void)—

metaReactNode—Small text under the name, such as "Edited 2 days ago".

classNamestring—

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.