Progress component
Installation
npx shadcn@latest add @caprice/progressnpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const { compose, cva, cx: cn,} = defineConfig({ hooks: { onComplete: (className: string) => twMerge(className), },});export type { VariantProps };Copy and paste the following code into your project.
import { Progress } from '@base-ui/react/progress';/** * Groups all parts of the progress bar and provides the task completion status to screen readers. * Renders a `<div>` element. * * Documentation: [Caprice UI Progress](https://caprice-ui.com/docs/components/progress) * * API Reference: [Base UI Progress](https://base-ui.com/react/components/progress#root) */export namespace Root { export type State = Progress.Root.State; export type Props = React.ComponentProps<typeof Progress.Root>;}export function Root({ ...props }: Root.Props) { return <Progress.Root data-slot="progress" {...props} />;}/** * Contains the progress bar indicator. * Renders a `<div>` element. * * Documentation: [Caprice UI Progress](https://caprice-ui.com/docs/components/progress) * * API Reference: [Base UI Progress](https://base-ui.com/react/components/progress#track) */export namespace Track { export type Props = React.ComponentProps<typeof Progress.Track>;}export function Track({ ...props }: Track.Props) { return <Progress.Track data-slot="progress-track" {...props} />;}/** * Visualizes the completion status of the task. * Renders a `<div>` element. * * Documentation: [Caprice UI Progress](https://caprice-ui.com/docs/components/progress) * * API Reference: [Base UI Progress](https://base-ui.com/react/components/progress#indicator) */export namespace Indicator { export type Props = React.ComponentProps<typeof Progress.Indicator>;}export function Indicator({ ...props }: Indicator.Props) { return <Progress.Indicator data-slot="progress-indicator" {...props} />;}/** * A text label displaying the current value. * Renders a `<span>` element. * * Documentation: [Caprice UI Progress](https://caprice-ui.com/docs/components/progress) * * API Reference: [Base UI Progress](https://base-ui.com/react/components/progress#value) */export namespace Value { export type Props = React.ComponentProps<typeof Progress.Value>;}export function Value({ ...props }: Value.Props) { return <Progress.Value data-slot="progress-value" {...props} />;}/** * An accessible label for the progress bar. * Renders a `<span>` element. * * Documentation: [Caprice UI Progress](https://caprice-ui.com/docs/components/progress) * * API Reference: [Base UI Progress](https://base-ui.com/react/components/progress#label) */export namespace Label { export type Props = React.ComponentProps<typeof Progress.Label>;}export function Label({ ...props }: Label.Props) { return <Progress.Label data-slot="progress-label" {...props} />;}Update the import paths to match your project setup.
Usage
import * as Progress from "@/components/caprice-ui/progress"import * as Progress from "@caprice-ui/react/progress"