PaperCard

The foundational paper container every layout can build on.

← foundation first. everything else stacks on top.

Preview

Feature

Card heading with intent

A focused card surface for docs, dashboards, and content previews.

Updated 2m ago

import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const paperCardVariants = cva('border-2 border-ink-black rounded-none paper-grain transition-all duration-200 ease-paper', {
  variants: {

Installation

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperCard/paperCard.tsx⎘
Step 2.Create the barrel:
components/ui/paperCard/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperCard'
```

Variants

Default

Default card

Featured

Featured card

Aged

Aged card

Ghost

Ghost card

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'featured' \| 'dark' \| 'ghost' \| 'aged'`	`default`	Surface style and emphasis level.
`hoverable`	`boolean`	`false`	Enables lift-on-hover interaction.
`children`	`ReactNode`	`required`	Card content tree.

Examples

Feature summary

Combine subtitle + title + CTA in one compact card.

Feature summary card

<PaperCard variant="featured">Feature summary card</PaperCard>

Passive surface

Use ghost variant where hierarchy should stay quiet.

Passive content surface

<PaperCard variant="ghost">Passive content surface</PaperCard>