Card
Displays a card with header, content, and footer sections.
Installation
pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/card.jsonImage Cards
Cards with hero images, text content, and action buttons.
Background
Background stations are not influenced significantly by single sources but by an integrated contribution of all sources. (Colored Border)
Suburban
Suburban station has been identified as located such that its pollution level is determined predominantly by emissions from nearby residential areas.
Traffic
Traffic stations have been identified as located such that its pollution level is determined predominantly by road traffic emissions.
Mobile
Industrial stations have been identified as located such that its pollution level is influenced predominantly by nearby industrial sources.
Compact Cards
Compact row-style cards with icon, title, and description.
Card Title
Card content placeholder text goes here
Card Title
Card content placeholder text goes here
Card Title
Card content placeholder text goes here
Detail Cards
Detailed cards with nested sub-cards for data display.
Prince Sultan Humanity City
Description
Located In A Medical Compound Approximately 40km North From The Centre Of Riyadh
Coordinates (Latitude/Longitude)
24.751314 , 46.868278
Altitude
579 m
Kerb Distance
--
Al Hair
Description
The Monitoring Station Is Situated Within A Purpose Built Self-Contained Air Conditioned Enclosure Located In The Arriyadh Development Authority Recreational Area
Coordinates (Latitude/Longitude)
24.383322 , 46.897128
Altitude
498 m
Kerb Distance
--
Selectable Cards
Cards with checkbox selection — supports default, selected, and disabled states.
Card Title
Card content placeholder text goes here
Card Title
Card content placeholder text goes here
Card Title
Card content placeholder text goes here
Cards with Actions
Cards with icon header, content body, and action button footer.
Card Title
Card content placeholder text goes here
Card Title
Card content placeholder text goes here
Card Title
Card content placeholder text goes here
Minimal Cards
Simple text-only cards with title and description.
Coordinates
24.7136° N, 46.6753° E
Altitude
612 m
Kerb Distance
15 m
Sub-components
| Component | Description |
|---|---|
Card | Root wrapper. Accepts disabled prop. |
CardHeader | Top section for icons or meta. |
CardTitle | Primary heading text. |
CardDescription | Supporting description text. |
CardAction | Slot for interactive elements (checkbox, button). |
CardContent | Main content area. |
CardFooter | Bottom section for actions. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Disables interaction and mutes colors |
className | string | — | Additional CSS classes |