Line Item
You can edit 8 Components for free. Get premium for unlimited access.
A versatile component that you can use to display any content.
Figma
The Line Item component is used to sort menu items on a page and provide easy and understandable access.
1. Reference
This component inherits props from the Line Item.
2. Type
You can edit the type with the default, toggle, button, icon, checkbox or radioButton parameter.
Image 2.1 : Type default
Image 2.2 : Type toggle
Image 2.3 : Type checkbox
Image 2.4 : Type radioButton
Image 2.5 : Type button
Image 2.6 : Type icon
3. State
You can edit the state with the default or disabled parameter.
Image 3.1 : State default
Image 3.2 : State disabled
4. Icon
You can edit the icon with the true or false parameter.
Image 4.1 : Icon false
Image 4.2 : Icon true
5. Description
You can edit the description with the true or false parameter.
Image 5.1 : Description true
Image 5.2 : Description false
Jetpack Compose
The LineItem component is used to sort menu items on a page and provide easy and understandable access.
1. Reference
This component inherits props from the Line Item.
-
-
2. Type
You can edit the type with the LineItemType.default, LineItemType.icon, LineItemType.checkbox, LineItemType.radioButton, LineItemType.toggle or LineItemType.button parameter.
Headline
Description
Headline
Description
Headline
Description
Headline
Description
Headline
Description
Headline
Description
title = "Headline",
description = "Description",
type = LineItemType.default
)
LineItem(
title = "Headline",
description = "Description",
type = LineItemType.icon(R.drawable.ic_line_item_crop)
)
LineItem(
title = "Title",
description = "Description",
type = LineItemType.checkbox
)
LineItem(
title = "Headline",
description = "Description",
type = LineItemType.radioButton
)
LineItem(
title = "Headline",
description = "Description",
type = LineItemType.toggle(value = remember { mutableStateOf(false)
})
)
LineItem(
title = "Headline",
description = "Description",
type = LineItemType.button(onButtonClick = {
})
)
3. State
You can edit the state with the LineItemState.default or LineItemState.disabled parameter.
Headline
Description
Headline
Description
title = "Headline",
description = "Description",
type = LineItemType.default
)
LineItem(
title = "Headline",
description = "Description",
type = LineItemType.disabled
)
Preview
Preview
Code
Headline
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
States
Preview
Code
Headline
Description
Headline
Description
Headline
Description
Headline
Description
Headline
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>
)
}Disabled
Preview
Code
Headline
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>
)
}Discover more content
You have questions or need help?
You want to try?
Save time and money?