Pagination
You can edit 8 Components for free. Get premium for unlimited access.
...
Figma
The Pagination component is used to show that several elements are aligned horizontally. You can switch between these elements with a swipe.
1. Reference
This component inherits props from the Pagination.
2. Count
You can edit the count with the 2, 3, 4 or 5 parameter.
Image 2.1 : Count 2
Image 2.2 : Count 3
Image 2.3 : Count 4
Image 2.4 : Count 5
3. State
You can edit the state with the default or selected parameter.
Image 3.1 : State selected
Image 3.2 : State default
4. Mode
You can edit the mode with the light or dark parameter.
Image 4.1 : Mode dark
Image 4.2 : Mode light
Jetpack Compose
The Pagination component is used to show that several elements are aligned horizontally. You can switch between these elements with a swipe.
1. Reference
This component inherits props from the Pagination.
-
-
-
2. Count
You can edit the count with the "number" parameter.
count = 2,
mode = PaginationMode.dark,
currentPage = remember {
mutableIntStateOf(0)
},
onDotClicked = {
}
)
Pagination(
count = 5,
mode = PaginationMode.dark,
currentPage = remember {
mutableIntStateOf(0)
},
onDotClicked = {
}
)
3. Mode
You can edit the mode with the .light or .dark parameter.
count = 5,
mode = PaginationMode.dark,
currentPage = remember {
mutableIntStateOf(0)
},
onDotClicked = {
}
)
Pagination(
count = 5,
mode = PaginationMode.light,
currentPage = remember {
mutableIntStateOf(0)
},
onDotClicked = {
}
)
Preview
Preview
Code
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>Discover more content
You have questions or need help?
You want to try?
Save time and money?