fn_registry/frontend/functions/ui/card.md at 97a3c8462501812edb2dc72d0f49fd6b9bbab4b7

Files

T

egutierrez 97a3c84625 refactor: migrate frontend from shadcn/Tailwind to Mantine v9

Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind.
Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind.
Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.)
y MantineProvider como wrapper estándar del sistema de temas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-04-06 23:46:44 +02:00

2.3 KiB

Raw Blame History

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant, source_repo, source_license, source_file

name

kind

lang

domain

version

purity

signature

description

tags

uses_functions

uses_types

returns

returns_optional

error_type

imports

output

tested

tests

test_file_path

file_path

props

emits

has_state

framework

variant

source_repo

source_license

source_file

card

component

1.1.0

impure

Card(props: { size?: 'default' | 'sm'; variant?: 'default' | 'borderless' | 'ghost'; className?: string; children: ReactNode }): JSX.Element

Contenedor card con header, title, description, action, content y footer. Sistema de slots composable. Variantes default, borderless y ghost para dashboards dark.

card

container

layout

component

dashboard

dark

false

react

Componente Card que renderiza un contenedor con slots composables (header, content, footer) y 3 variantes visuales

false

frontend/functions/ui/card.tsx

name	type	required	description
size	'default' \| 'sm'	false	Tamaño del card

name	type	required	description
variant	'default' \| 'borderless' \| 'ghost'	false	Variante visual. borderless quita borde/shadow, ghost además hace bg transparente

name	type	required	description
className	string	false	Clases CSS adicionales

false

react

default

borderless

ghost

https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library

MIT

frontend/src/components/ui/card.tsx

Ejemplo

<Card>
  <CardHeader>
    <CardTitle>Título</CardTitle>
    <CardDescription>Descripción</CardDescription>
  </CardHeader>
  <CardContent>Contenido</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>

{/* Dashboard dark — sin bordes */}
<Card variant="borderless">
  <CardContent>Widget sin marco</CardContent>
</Card>

{/* Completamente transparente */}
<Card variant="ghost">
  <CardContent>Sin fondo ni borde</CardContent>
</Card>

Notas

Sistema de slots via data-slot attributes. Card detecta automáticamente la presencia de CardFooter y ajusta el padding. Exporta 7 subcomponentes composables.

Las variantes borderless y ghost eliminan el ring-1 del borde por defecto. ghost además hace el fondo transparente. Alternativa con CSS global: [data-slot="card"] { --tw-ring-opacity: 0; } o [data-variant="borderless"] { ring: 0 } via data-variant attribute expuesto.

2.3 KiB Raw Blame History

Ejemplo

Notas

2.3 KiB

Raw Blame History