Tab Control
You can edit 8 Components for free. Get premium for unlimited access.
A set of layered sections of content — known as tab panels — that are displayed one at a time.
Figma
The Tab Control is a component that creates a tab control with a set of items, where users can switch between different tabs.
1. Reference
This component inherits props from the Tab 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.2 : State disabled
4. Badge
You can edit the badge with the true or false parameter.
Image 4.1 : Badge false
Image 4.2 : Badge true
Jetpack Compose
The TabControl is a component that creates a tab control with a set of items, where users can switch between different tabs.
1. Reference
This component inherits props from the Tab Control.
?
-
-
-
-
-
2. State
You can edit the state with the .normal or .disabled parameter.
item(
state = TabControlState.default,
label = "Label-1",
onClick = {
tabs1.intValue = 0
})
item(
state = TabControlState.default,
label = "Label-2",
onClick = {
tabs1.intValue = 1
})
}
TabControl(selectedIndex = tabs1.intValue) {
item(
state = TabControlState.default,
label = "Label-1",
onClick = {
tabs1.intValue = 0
})
item(
state = TabControlState.disabled,
label = "Label-2",
onClick = {
tabs1.intValue = 1
})
}
3. Count
You can edit the count with the "text" parameter.
item(
state = TabControlState.default,
label = "Label-1",
onClick = { tabs2.intValue = 0
})
item(
state = TabControlState.default,
badge = "5",
label = "Label-2",
onClick = { tabs2.intValue = 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?