Candor UI

Surface

Free · MIT

Candor's card: a plain, muted, bordered or floating surface, so no screen hand-rolls its own.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/surface

Brings in: utils · npm: class-variance-authority@^0.7.1

Usage

TSX · The example above
"use client"

import { Surface } from "@/components/surface"

export default function Example() {
  return (
    <div className="grid gap-3 sm:grid-cols-3">
      {(["plain", "muted", "raised"] as const).map((tone) => (
        <Surface key={tone} tone={tone} className="h-20">
          <p className="text-sm font-medium capitalize">{tone}</p>
        </Surface>
      ))}
    </div>
  )
}

<Surface>

No props.

Also takes the props of React.ComponentProps<"div">VariantProps<typeof surfaceVariants>.