Carregando…
Carregando…
Carregando…Versatile card container with 5 variants, padding, radius, hover, link and glass/glow/tilt/spotlight/gradient-border effects.
$ npx kikitocn add card@/lib/utilsimport { Card } from "@/components/ui/cn/card/Card";
export function CardExample() {
return (
<Card className="max-w-sm p-6">
<h3 className="font-semibold text-foreground mb-1">Título do card</h3>
<p className="text-muted text-sm">
Conteúdo do card. Aceita qualquer children.
</p>
</Card>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
effect | 'none' | 'glass' | 'glow' | 'tilt' | 'spotlight' | 'gradient-border' | 'none' | Efeito visual absorvido. 'none' mantém o card padrão |
blur | number | 12 | Intensidade do backdrop-blur em px (effect="glass") |
opacity | number | 0.1 | Opacidade do fundo translúcido (effect="glass") |
glowColor | string | 'var(--ks-primary)' | Cor do brilho que segue o cursor (effect="glow") |
glowSize | number | 400 | Diâmetro do brilho radial em px (effect="glow") |
glowOpacity | number | 0.14 | Opacidade do brilho (effect="glow") |
maxTilt | number | 15 | Inclinação máxima em graus (effect="tilt") |
glare | boolean | true | Exibe o reflexo de brilho que segue o cursor (effect="tilt") |
colors | string[] | ['var(--ks-violet)', 'var(--ks-primary)', 'var(--ks-kinpaku)', 'var(--ks-rose)'] | Cores da borda gradiente (effect="gradient-border") |
borderWidth | number | 2 | Espessura da borda gradiente em px (effect="gradient-border") |
gradientVariant | 'spin' | 'pulse' | 'static' | 'spin' | Modo de animação da borda gradiente (effect="gradient-border") |
variant | 'default' | 'outlined' | 'elevated' | 'filled' | 'ghost' | 'default' | Estilo visual do card |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Padding interno |
radius | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Border-radius do card |
hoverable | boolean | false | Aplica elevação no hover |
clickable | boolean | false | Cursor pointer + foco acessível |
href | string | undefined | Torna o card um elemento <a> |
onClick | MouseEventHandler | undefined | Handler de clique |
children | ReactNode | undefined | Conteúdo do card |
default · outlined · elevated · filled · ghost
default
Card variant
outlined
Card variant
elevated
Card variant
filled
Card variant
ghost
Card variant
Full composition
Project Alpha
UI component library
A design system with 150+ components for building product UIs.
Interactive cards
Hoverable
Elevates on hover
Glass Card — frosted glass with backdrop blur
blur: 12px
opacity: 0.1
blur: 24px
opacity: 0.2
Glow Card — radial glow follows mouse position
Patina Glow
Hover to see the effect
Kinpaku Glow
Hover to see the effect
Tilt Card — 3D mouse-tracked tilt with glare
Hover me
Gradient
No glare
Spotlight — mouse-tracked radial glow overlay
Spotlight Effect
Move your cursor over this area
Gradient Border — spinning and static variants
Spin
Conic gradient
Pulse
Token colors
Static
Linear gradient