Information Card

Information cards can serve as callout cards, banners, toast notifications, or announcement boxes to deliver news, updates, and alerts to your users.

It works especially well in sidebars, but you can use it anywhere too!

Playground

Open in

Installation

pnpm dlx shadcn@latest add 'https://karrix.dev/r/info-card'

Props and Usage

Basic Usage

<InfoCard>
  <InfoCardContent>
    <InfoCardTitle>Introducing New Dashboard</InfoCardTitle>
    <InfoCardDescription>
      New Feature. New Platform. Same Feel.
    </InfoCardDescription>
    <InfoCardMedia
      media={[
        {
          src: "https://cd-misc.s3.us-east-2.amazonaws.com/sidebar/third.webp",
        },
        {
          src: "https://cd-misc.s3.us-east-2.amazonaws.com/sidebar/second.webp",
        },
        {
          src: "https://cd-misc.s3.us-east-2.amazonaws.com/sidebar/first.webp",
        },
      ]}
    />
    <InfoCardFooter>
      <InfoCardDismiss>Dismiss</InfoCardDismiss>
      <InfoCardAction>
        <Link
          href="#"
          className="flex flex-row items-center gap-1 underline"
        >
          Try it out <ExternalLink size={12} />
        </Link>
      </InfoCardAction>
    </InfoCardFooter>
  </InfoCardContent>
</InfoCard>

Steps Usage

<InfoCard />

storageKeystring

Required when using dismissType='forever'. Used to store the dismissed state in localStorage.

dismissType'once' | 'forever'

Default: 'once'

Controls whether the card should be dismissed temporarily or permanently using localStorage.

childrenReact.ReactNode

The content of the card.

<InfoCardMedia />

mediaMediaItem[]

Array of media items to display. Each item can be an image or video. At most 3 items are supported.

shrinkHeightnumber

Default: 75

Height of the media container when not hovered (in pixels).

expandHeightnumber

Default: 150

Height of the media container when hovered (in pixels).

loading'eager' | 'lazy'

Controls the loading behavior of images.

MediaItem

type'image' | 'video'

Default: 'image'

The type of media to display.

srcstring

The URL of the media resource.

altstring

Alt text for images (accessibility).

classNamestring

Additional CSS classes to apply to the media element.

propsReact.HTMLAttributes<HTMLDivElement>

Additional props to pass to the media element.

KL

Getting Started

Components