Home/Componentes/Card

Card

Containers flexíveis para organizar e apresentar conteúdo.

Preview

Visualização do componente Card com diferentes configurações

Card Básico

Um card simples com título e descrição

Este é o conteúdo do card.

Card com Footer

Card com botões no rodapé

Card com área de ações no rodapé.

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

2. Adicionar componente

npx @scmposs/hollow-ui add card

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

Uso Básico

Exemplo básico

import { 
  Card, 
  CardContent, 
  CardDescription, 
  CardFooter, 
  CardHeader, 
  CardTitle 
} from "@scmposs/hollow-ui"

<Card>
  <CardHeader>
    <CardTitle>Título do Card</CardTitle>
    <CardDescription>Descrição opcional</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Conteúdo do card</p>
  </CardContent>
  <CardFooter>
    <Button>Ação</Button>
  </CardFooter>
</Card>

Exemplos

Card de Produto

hollow-UI

v1.0.0

Framework de componentes React

Coleção moderna de componentes reutilizáveis construída com React, TypeScript e Tailwind CSS.

Card de Estatísticas

Total de Componentes

30+

+12% em relação ao mês anterior

Downloads

1.2k

+25% em relação ao mês anterior

Estrelas

+8% em relação ao mês anterior