Card

Контейнер содержимого для группировки связанной информации.

Создание проекта

Разверните новый проект в один клик.

Это займёт несколько секунд.

import { IconAlertCircle } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardPanel,
  CardTitle,
} from "@/components/ui/card";
import { Field, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const frameworkOptions = [
  { label: "Next.js", value: "next" },
  { label: "Vite", value: "vite" },
  { label: "Remix", value: "remix" },
  { label: "Astro", value: "astro" },
];

export default function Particle() {
  return (
    <Card className="w-full max-w-xs">
      <CardHeader>
        <CardTitle>Создание проекта</CardTitle>
        <CardDescription>Разверните новый проект в один клик.</CardDescription>
      </CardHeader>
      <CardPanel>
        <Form className="flex w-full flex-col gap-4">
          <Field>
            <FieldLabel>Название</FieldLabel>
            <Input placeholder="Название проекта" type="text" />
          </Field>
          <Field>
            <FieldLabel>Фреймворк</FieldLabel>
            <Select defaultValue="next" items={frameworkOptions}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectPopup>
                {frameworkOptions.map(({ label, value }) => (
                  <SelectItem key={value} value={value}>
                    {label}
                  </SelectItem>
                ))}
              </SelectPopup>
            </Select>
          </Field>
          <Button className="w-full" type="submit">
            Развернуть
          </Button>
        </Form>
      </CardPanel>
      <CardFooter>
        <div className="flex gap-1 text-muted-foreground text-xs">
          <IconAlertCircle className="size-3 h-lh shrink-0" stroke={1.5} />
          <p>Это займёт несколько секунд.</p>
        </div>
      </CardFooter>
    </Card>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/card

Использование

import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardPanel,
  CardTitle,
} from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardPanel>Content</CardPanel>
  <CardFooter>Footer</CardFooter>
</Card>

CardFrame с действием в заголовке

Используйте CardFrame, когда вам нужна обрамлённая раскладка с кнопкой действия в заголовке (например, «Добавить», «Подключить»):

import {
  CardFrame,
  CardFrameAction,
  CardFrameDescription,
  CardFrameHeader,
  CardFrameTitle,
  CardPanel,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { PlusIcon } from "lucide-react"
 
<CardFrame>
  <CardFrameHeader>
    <CardFrameTitle>Project</CardFrameTitle>
    <CardFrameDescription>
      Manage your project settings and configuration
    </CardFrameDescription>
    <CardFrameAction>
      <Button variant="outline">
        <PlusIcon />
        Add
      </Button>
    </CardFrameAction>
  </CardFrameHeader>
  <Card>
    <CardPanel>Content</CardPanel>
  </Card>
</CardFrame>

Для списков или таблиц данных отрисуйте Table с variant="card" внутри CardFrame, чтобы границы и скругление таблицы соответствовали рамке. См. пример CardFrame в документации Table. Добавьте @oracul/table, если его ещё нет в проекте.

Справочник API

Это пользовательский компонент, использующий хук useRender из Base UI, а не прямую обёртку Base UI.

Card

Корневой контейнер карточки. Поддерживает свойство render.

Свойство	Тип	По умолчанию	Описание
`render`	`React.ReactElement`	-	Рендерит как другой элемент

CardHeader

Контейнер секции заголовка. Поддерживает свойство render.

CardTitle

Текст заголовка карточки. Поддерживает свойство render.

CardDescription

Текст описания карточки. Поддерживает свойство render.

CardAction

Контейнер для кнопок действий в заголовке. Автоматически позиционируется справа. Поддерживает свойство render.

CardPanel

Основная область содержимого карточки. Также экспортируется как CardContent. Поддерживает свойство render.

CardFooter

Секция нижнего колонтитула карточки. Поддерживает свойство render.

Справочник API CardFrame

CardFrame — это альтернативная раскладка для карточек, которая группирует заголовок, содержимое и нижний колонтитул с единообразной стилизацией и обрезкой. Используйте её, когда вам нужна обрамлённая карточка с опциональными действиями в заголовке.

CardFrame

Корневой контейнер для обрамлённой раскладки карточки. Поддерживает свойство render.

CardFrameHeader

Секция заголовка рамки. Содержит заголовок, описание и, при необходимости, CardFrameAction. Поддерживает свойство render.

CardFrameTitle

Текст заголовка рамки. Поддерживает свойство render.

CardFrameDescription

Текст описания рамки. Поддерживает свойство render.

CardFrameAction

Контейнер для кнопок действий (например, «Добавить», «Изменить») в заголовке. Размещайте его как соседний элемент CardFrameTitle и CardFrameDescription внутри CardFrameHeader. Он позиционируется в правом верхнем углу с помощью CSS grid (col-start-2, row-span-2, self-center, justify-self-end). Используйте его для основных действий, применимых ко всей рамке. Поддерживает свойство render.

CardFrameFooter

Секция нижнего колонтитула рамки. Поддерживает свойство render.

На этой странице

Установка Использование CardFrame с действием в заголовке CardFrame с таблицей Справочник API Card CardHeader CardTitle CardDescription CardAction CardPanel CardFooter Справочник API CardFrame CardFrame CardFrameHeader CardFrameTitle CardFrameDescription CardFrameAction CardFrameFooter