Tile UI React
Source code

Components

Card

Composable card primitives for headers, content, descriptions, and actions.

Use Card to group related information, actions, and descriptions into a surface with clear spatial hierarchy.

Starter workspace

Ship a consistent docs and component experience across React and Vue.

Use cards for summaries, settings surfaces, marketing CTAs, and denser information blocks that need a clear frame.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '@tile-ui/react';

export default function CardDemo() {
	return (
		<Card>
			<CardHeader>

Registry install

pnpm dlx shadcn@latest add @tile-ui/card

Package usage

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@tile-ui/react';
 
export function WorkspaceCard() {
	return (
		<Card>
			<CardHeader>
				<CardTitle>Starter workspace</CardTitle>
				<CardDescription>Ship a consistent docs and component experience.</CardDescription>
			</CardHeader>
			<CardContent>
				<p>Use cards for summaries, settings surfaces, marketing CTAs, and denser information blocks.</p>
			</CardContent>
			<CardFooter>
				<Button variant="outline">Preview</Button>
				<Button>Install</Button>
			</CardFooter>
		</Card>
	);
}

Highlights

  • Header, content, and footer primitives
  • Consistent section spacing
  • Renders as div, article, or section via the as prop
  • Useful for docs and app surfaces

Registry dependencies

ItemPurpose
cardComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

Card

PropTypeDefaultNotes
asdiv | article | sectiondivChooses the underlying HTML element.

CardHeader

No custom props. Extends React.HTMLAttributes<HTMLDivElement>.

CardTitle

No custom props. Renders an <h3> heading.

CardDescription

No custom props. Renders supporting copy below the title.

CardContent

No custom props. The main content region with consistent padding.

CardFooter

No custom props. An action row aligned to the end of the card.

CardAction

No custom props. An action slot rendered in the header, aligned to the trailing edge.

PreviousCalendarNextCarousel