EMBER // NEXTUI
Card
Composable card with Card, CardHeader, CardBody, and CardFooter sub-components. Uses `emb-ui-card` CSS classes for the Ember warm palette.
$
Or install the base component for free:
Live Preview
Open full demoUsage
TSX
<Card><CardHeader>Title</CardHeader><CardBody>Content</CardBody><CardFooter>Footer</CardFooter></Card>Variants
<Card><CardBody>Simple card with body only</CardBody></Card>
<Card><CardHeader>Article</CardHeader><CardBody>Card content here.</CardBody><CardFooter>Read more</CardFooter></Card>
Source
TSX
import type * as React from 'react'
import { cn } from '@/lib/utils'
interface CardProps {
children: React.ReactNode
className?: string
}
export function Card({ children, className }: CardProps): React.JSX.Element {
return <div className={cn('emb-ui-card', className)}>{children}</div>
}
export function CardHeader({ children, className }: CardProps): React.JSX.Element {
return <div className={cn('emb-ui-card-header', className)}>{children}</div>
}
export function CardBody({ children, className }: CardProps): React.JSX.Element {
return <div className={cn('emb-ui-card-body', className)}>{children}</div>
}
export function CardFooter({ children, className }: CardProps): React.JSX.Element {
return <div className={cn('emb-ui-card-footer', className)}>{children}</div>
}
Works withNext.js 15React 19Tailwind v4TypeScript 5
More from EMBER // NEXT
Button
Warm-toned button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Ember-styled badge with five color variants: orange, amber, green, red, and muted. Suited for category labels, status tags, and inline highlights.
Text
Polymorphic text primitive with body, caption, label, and code variants. Renders as p, span, or div via the `as` prop.