Progress

Export data

'use client';

import * as Progress from '@components/caprice-ui/progress';
import React from 'react';

export default function ProgressDemo() {
  const [value, setValue] = React.useState(20);

  // Simulate changes
  React.useEffect(() => {
    const interval = window.setInterval(() => {
      setValue((current) => Math.min(100, Math.round(current + Math.random() * 25)));
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <Progress.Root className="grid w-48 grid-cols-2 gap-y-2" value={value}>
      <Progress.Label className="font-medium text-gray-900 text-sm">Export data</Progress.Label>
      <Progress.Value className="col-start-2 text-right text-gray-900 text-sm" />
      <Progress.Track className="col-span-full h-1 overflow-hidden rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200">
        <Progress.Indicator className="block bg-gray-500 transition-all duration-500" />
      </Progress.Track>
    </Progress.Root>
  );
}

Installation

npx shadcn@latest add @caprice/progress

npx shadcn@latest add @caprice/progress

npm install @caprice-ui/react

npm install @caprice-ui/react

Install the following dependencies:

npm install @base-ui/react lucide-react

npm install @base-ui/react lucide-react

Add 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 };

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} />;
}

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 "@/components/caprice-ui/progress"

import * as Progress from "@caprice-ui/react/progress"

import * as Progress from "@caprice-ui/react/progress"

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} />; }

Installation

Install the following dependencies:

Add a cn helper

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

Examples

API Reference

On this page

Contribute