# antuikit / Card

> Card with `color`, `emphasis`, `shape`, `disabled`, a `footer`, an `inset` type and a `tabList` bar in the kit's Tabs style.

Docs: https://antuikit.com/docs/components/card

## Install

npx antuikit@latest init
npx antuikit@latest add card

## Import

import { Card } from "@/components/ui/card";

## Demos

- [Basic](https://ui.antuikit.com/embed/card/basic.md): Set `title` to add a header, or leave it out for a plain surface, and set `hoverable` to lift the card on hover.
- [Variant](https://ui.antuikit.com/embed/card/variant.md): Set `variant="borderless"` for a flat card with no shadow, next to the default outlined card, which rests on a soft shadow.
- [Size](https://ui.antuikit.com/embed/card/size.md): Set `size="small"` to tighten the header and body padding, for cards in dense grids and side panels.
- [Color](https://ui.antuikit.com/embed/card/color.md): Set `color` to one of the theme's hues and `emphasis` to choose how loud it is: `subtle` colors only the text, `strong` fills the card, and `type="inset"` colors just the frame.
- [Shape](https://ui.antuikit.com/embed/card/shape.md): Set `shape="squircle"` to bend the corners into a superellipse on a larger radius, next to a card with the default corners.
- [Inner](https://ui.antuikit.com/embed/card/inner.md): Set `type="inner"` on a card inside a card to give it a lighter header, so it reads as a section of its parent.
- [Inset](https://ui.antuikit.com/embed/card/inset.md): Set `type="inset"` to tint the card and put the body, the cover and the actions on their own raised surface inside it.
- [Cover and Meta](https://ui.antuikit.com/embed/card/cover.md): Pass `cover` a full-width image or banner above the body, and use `Card.Meta` for an avatar, a title and a description in one row.
- [Actions](https://ui.antuikit.com/embed/card/actions.md): Pass `actions` an array of nodes, each with a `key`, to add a bottom row split into equal slots for buttons or icons.
- [Footer](https://ui.antuikit.com/embed/card/footer.md): Pass `footer` for a row below the body with a divider above it, or under `type="inset"` a row on the tinted frame outside the raised surface.
- [Tabs](https://ui.antuikit.com/embed/card/tabs.md): Pass `tabList` to put tabs in the header, `activeTabKey` and `onTabChange` to control them, and `tabBarExtraContent` for a button at the end.
- [Grid cells](https://ui.antuikit.com/embed/card/grid.md): Put `Card.Grid` cells in the body to split it into tiles that lift on hover, and set `hoverable={false}` on a cell to keep it still.
- [Loading](https://ui.antuikit.com/embed/card/loading.md): Set `loading` to show a skeleton in the body while the header, the cover and the actions stay in place, here toggled by a switch.
- [Disabled](https://ui.antuikit.com/embed/card/disabled.md): Set `disabled` to dim a card and block every click, focus and screen reader visit inside it, next to an active card.
- [Linked card](https://ui.antuikit.com/embed/card/clickable-card.md): Wrap a `hoverable` card in an `<a>` with the `block` class to make the whole card a link.
- [Header menu](https://ui.antuikit.com/embed/card/dropdown-actions.md): Put a Dropdown button in `extra` to give the card a menu of actions in its header, like view, edit and delete.
- [Expandable](https://ui.antuikit.com/embed/card/expandable-card.md): A usage card with a Details button in `extra` that shows the cost breakdown in the body, kept in local state.
- [Cards in a grid](https://ui.antuikit.com/embed/card/overview.md): Place cards in a `Row` with a `gutter`, each in a responsive `Col`, for a row of stat cards that stacks on small screens.
- [Project grid](https://ui.antuikit.com/embed/card/project-cards.md): A grid of project cards, each with a cover, a stacked avatar group, a short description, tags and an actions row.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/card`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Card` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.