Segmented Control
You can edit 8 Components for free. Get premium for unlimited access.
...
Figma
The Segment Control component allows users to switch between multiple options and provides an animated selection indicator.
1. Reference
This component inherits props from the Segmented Control.
2. Count
You can edit the count with the 2, 3 or 4 parameter.
Image 2.1 : Count 2
Image 2.2 : Count 3
Image 2.3 : Count 4
3. State
You can edit the state with the default, selected or disabled parameter.
Image 3.1 : State default
Image 3.1 : State disabled
Jatpack Compose
The SegmentControl component allows users to switch between multiple options and provides an animated selection indicator.
1. Reference
This component inherits props from the Segmented Control.
label
-
-
-
2. Items
You can edit the items with the label parameter.
selectedIndex=selectedItemDouble,
items = {
item(
label = "Label-1",
onClick = {
selectedItemDouble = 0
}
)
item(
label = "Label-2",
onClick = {
selectedItemDouble = 1
}
)
})
3. State
You can edit the state with the SegmentedControlState.default or SegmentedControlState.disabled parameter.
selectedIndex=selectedItemDouble,
items = {
item(
label = "Label-1",
onClick = {
selectedItemDouble = 0
}
)
item(
label = "Label-2",
state = SegmentedControlState.disabled,
onClick = {
selectedItemDouble = 1
}
)
})
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>Examples
Disabled
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>
)
}Discover more content
You have questions or need help?
You want to try?
Save time and money?