UI

Card

A fundamental building block for KPI cards, forms, or sections.

GitHubStorybook

Card

Installation

  1. 1

    Install dependencies:

    npm i @radix-ui/react-slot
  2. 2

    Add component:

    Copy and paste the code into your project’s component directory. Do not forget to update the import paths.
    // Tremor Card [v0.0.2]
import React from "react"import { Slot } from "@radix-ui/react-slot"
import { cx } from "@/lib/utils"
interface CardProps extends React.ComponentPropsWithoutRef<"div"> {  asChild?: boolean}
const Card = React.forwardRef<HTMLDivElement, CardProps>(  ({ className, asChild, ...props }, forwardedRef) => {    const Component = asChild ? Slot : "div"    return (      <Component        ref={forwardedRef}        className={cx(          // base          "relative w-full rounded-lg border p-6 text-left shadow-sm",          // background color          "bg-white dark:bg-[#090E1A]",          // border color          "border-gray-200 dark:border-gray-900",          className,        )}        tremor-id="tremor-raw"        {...props}      />    )  },)
Card.displayName = "Card"
export { Card, type CardProps }

Example: Card with content

Place content inside a Card to visually group it.

The greatest of all time (in tennis)

Roger Federer's unparalleled combination of skill, longevity, and versatility has led him to hold numerous records, including the most Grand Slam singles titles.

Example: Card with asChild prop

To render semantically correct list items in the style of a card, wrap the <li> elements within a Card component and apply the asChild prop.

  • This card will be turned into a <li> element
  • This card will also be turned into a <li> element

API Reference: Card

This component is based on the div element and supports all of its props.

asChild
boolean
When enabled, the wrapper component is rendered as the first child element and its properties combined.

Default: false