Components
Templates
Introduction
About
Getting started
Changelog
Roadmap
Accordion
Alert
Avatar
Avatar Group
Badge
Bottom Navigation
Bottom Sheet
Button
Button Dock
Button Icon
Button Loading
Button Timed
Card
Checkbox
Chip
Coach Mark
Input
Input OTP
Line Item
Line Item Message
Loading Dots
Message
Message Loading
Message Dock
Pagination
Pin Keyboard
Progress
Radio Button
Radio Group
Search Field
Separator
Segmented Control
Snackbar
Skeleton
Slider
Switch
Tab Control
Tag
Textarea
Tooltip
Top Navigation
Top Navigation Message
Account Setup
Account
Chat
Country selection
Filter
Forgot password
Inbox
Log in
Passcode
Paywall
Search
Sign up
Splash Screen
Verification
Grid
Iconography
Screen Sizes
Toolkit
App Icon
Colors
Illustrations
Logo Versions
Typography
Background Color
Border Color
Radius
Border Width
Font Size
Font Weight
Font Family
Line Height
Letter Spacing
Breakpoints
Spacing
Shadow
Dark mode
Card
PRO
You can edit 8 Components for free. Get premium for unlimited access.
Displays a card with header, content, and footer.
Figma
The Card component is used to group elements together and allows quick access to features.
1. Reference
This component inherits props from the Card.
Prop
Type
Default
state
default
active
disabled
default
size
md
lg
lg
description
true
false
true
2. Size
You can edit the size with the md or lg parameter.
Image 2.1 : Size md
Image 2.2 : Size lg
3. State
You can edit the state with the default, active or disabled parameter.
Image 3.1 : State default
Image 3.2 : State active
Image 3.3 : State disabled
4. Description
You can edit the description with the true or false parameter.
Image 4.1 : Description true
Image 4.2 : Description false
SwiftUI
The DLCard component is used to group elements together and allows quick access to features.
1. Reference
This component inherits props from the Card.
Prop
Type
Default
state
.normal
.disabled
.normal
size
.md
.lg
.lg
description
"text"
-
title
"text"
-
icon
"icon"
-
2. Size
You can edit the size with the .md or .lg parameter.
Title
Description
Title
Description
DLCard(
icon: "ic_Placeholder",
title: "Title",
description: "Description",
size: .lg,
state: .normal
)
DLCard(
icon: "ic_Placeholder",
title: "Title",
description: "Description",
size: .md,
state: .normal
)
icon: "ic_Placeholder",
title: "Title",
description: "Description",
size: .lg,
state: .normal
)
DLCard(
icon: "ic_Placeholder",
title: "Title",
description: "Description",
size: .md,
state: .normal
)
3. State
You can edit the state with the .normal or .disabled parameter.
Title
Description
Title
Description
DLCard(
icon: "ic_Placeholder",
title: "Title",
description: "Description",
size: .lg,
state: .disabled
)
DLCard(
icon: "ic_Placeholder",
title: "Title",
description: "Description",
size: .md,
state: .disabled
)
icon: "ic_Placeholder",
title: "Title",
description: "Description",
size: .lg,
state: .disabled
)
DLCard(
icon: "ic_Placeholder",
title: "Title",
description: "Description",
size: .md,
state: .disabled
)
Jetpack Compose
The Card component is used to group elements together and allows quick access to features.
1. Reference
This component inherits props from the Card.
Prop
Type
Default
state
CardState.default
CardState.disabled
CardState.default
size
CardSize.md
CardSize.lg
CardSize.lg
description
"text"
-
title
"text"
-
icon
"icon"
-
2. Size
You can edit the size with the CardSize.md or CardSize.lg parameter.
Title
Description
Title
Description
Card(
title = "Title",
description = "Description",
size = CardSize.lg,
icon = R.drawable.ic_crop,
state = CardState.default,
onClick = {}
)
Card(
title = "Title",
description = "Description",
size = CardSize.md,
icon = R.drawable.ic_crop,
state = CardState.default,
onClick = {}
)
title = "Title",
description = "Description",
size = CardSize.lg,
icon = R.drawable.ic_crop,
state = CardState.default,
onClick = {}
)
Card(
title = "Title",
description = "Description",
size = CardSize.md,
icon = R.drawable.ic_crop,
state = CardState.default,
onClick = {}
)
3. State
You can edit the state with the CardState.default or CardState.disabled parameter.
Title
Description
Title
Description
Card(
title = "Title",
description = "Description",
size = CardSize.lg,
icon = R.drawable.ic_crop,
state = CardState.disabled,
onClick = {}
)
Card(
title = "Title",
description = "Description",
size = CardSize.md,
icon = R.drawable.ic_crop,
state = CardState.disabled,
onClick = {}
)
title = "Title",
description = "Description",
size = CardSize.lg,
icon = R.drawable.ic_crop,
state = CardState.disabled,
onClick = {}
)
Card(
title = "Title",
description = "Description",
size = CardSize.md,
icon = R.drawable.ic_crop,
state = CardState.disabled,
onClick = {}
)
Preview
Preview
Code
Title
Description
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
export function AvatarDemo() {
return (
<div className="flex flex-row flex-wrap items-center gap-12">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar className="rounded-lg">
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
<div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
</div>
</div>
)
}Installation
Use this command to install the component in your project.
pnpm dlx shadcn@latest add alertUsage
Add this code example to your project to see how the component works.
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"<Alert variant="default | destructive">
<Terminal />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components and dependencies to your app using the cli.
</AlertDescription>
</Alert>Examples
Size
Preview
Code
Title
Description
Title
Description
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
export function AvatarDemo() {
return (
<div className="flex flex-row flex-wrap items-center gap-12">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar className="rounded-lg">
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
<div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
</div>
</div>
)
}State
Preview
Code
Title
Description
Title
Description
Title
Description
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
export function AvatarDemo() {
return (
<div className="flex flex-row flex-wrap items-center gap-12">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar className="rounded-lg">
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
<div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
</div>
</div>
)
}Without Description
Preview
Code
Title
Description
Title
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
export function AvatarDemo() {
return (
<div className="flex flex-row flex-wrap items-center gap-12">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar className="rounded-lg">
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
<div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
</div>
</div>
)
}Discover more content
You have questions or need help?
You want to try?
Save time and money?