Docs
Progress
Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
import { Progress } from "@repo/tailwindcss/ui/progress";
const ProgressDemo = () => {
return <Progress value={60} class="w-60%" />;
};
export default ProgressDemo;Installation
npx shadcn-solid@latest add progressInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
import { cn } from "@/libs/cn";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { ProgressRootProps } from "@kobalte/core/progress";
import { Progress as ProgressPrimitive } from "@kobalte/core/progress";
import type { ParentProps, ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
export const ProgressLabel = ProgressPrimitive.Label;
export const ProgressValueLabel = ProgressPrimitive.ValueLabel;
type progressProps<T extends ValidComponent = "div"> = ParentProps<
ProgressRootProps<T> & {
class?: string;
}
>;
export const Progress = <T extends ValidComponent = "div">(
props: PolymorphicProps<T, progressProps<T>>,
) => {
const [local, rest] = splitProps(props as progressProps, [
"class",
"children",
]);
return (
<ProgressPrimitive
class={cn("flex w-full flex-col gap-2", local.class)}
{...rest}
>
{local.children}
<ProgressPrimitive.Track class="h-2 overflow-hidden rounded-full bg-primary/20">
<ProgressPrimitive.Fill class="h-full w-[--kb-progress-fill-width] bg-primary transition-all duration-500 ease-linear data-[progress=complete]:bg-primary" />
</ProgressPrimitive.Track>
</ProgressPrimitive>
);
};Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
import { cn } from "@/libs/cn";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { ProgressRootProps } from "@kobalte/core/progress";
import { Progress as ProgressPrimitive } from "@kobalte/core/progress";
import type { ParentProps, ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
export const ProgressLabel = ProgressPrimitive.Label;
export const ProgressValueLabel = ProgressPrimitive.ValueLabel;
type progressProps<T extends ValidComponent = "div"> = ParentProps<
ProgressRootProps<T> & {
class?: string;
}
>;
export const Progress = <T extends ValidComponent = "div">(
props: PolymorphicProps<T, progressProps<T>>,
) => {
const [local, rest] = splitProps(props as progressProps, [
"class",
"children",
]);
return (
<ProgressPrimitive
class={cn("flex w-full flex-col gap-2", local.class)}
{...rest}
>
{local.children}
<ProgressPrimitive.Track class="h-2 overflow-hidden rounded-full bg-primary/20">
<ProgressPrimitive.Fill class="h-full w-[--kb-progress-fill-width] bg-primary transition-all duration-500 ease-linear data-[progress=complete]:bg-primary" />
</ProgressPrimitive.Track>
</ProgressPrimitive>
);
};Usage
import { Progress } from "@/components/ui/progress";<Progress value={33} />