@radix-ui/react-progress

What is @radix-ui/react-progress?

@radix-ui/react-progress is a React component library that provides a customizable and accessible progress bar component. It is part of the Radix UI suite, which focuses on providing unstyled, accessible components that can be easily styled to fit any design system.

What are @radix-ui/react-progress's main functionalities?

Basic Progress Bar

This code demonstrates a basic progress bar with a value of 50 out of 100. The `Progress` component is used to create a simple progress bar.

```jsx
import { Progress } from '@radix-ui/react-progress';

function BasicProgressBar() {
  return (
    <Progress value={50} max={100} />
  );
}
```

Custom Styled Progress Bar

This code demonstrates how to apply custom styles to the progress bar. The `className` prop is used to apply styles from an external CSS file.

```jsx
import { Progress } from '@radix-ui/react-progress';
import './customStyles.css';

function CustomStyledProgressBar() {
  return (
    <Progress className="custom-progress" value={75} max={100} />
  );
}
```

Indeterminate Progress Bar

This code demonstrates an indeterminate progress bar, which is useful for indicating ongoing processes where the duration is unknown.

```jsx
import { Progress } from '@radix-ui/react-progress';

function IndeterminateProgressBar() {
  return (
    <Progress indeterminate />
  );
}
```

Other packages similar to @radix-ui/react-progress

react-bootstrap

React-Bootstrap provides a set of React components that implement the Bootstrap framework. It includes a `ProgressBar` component that is styled according to Bootstrap's design system. Compared to @radix-ui/react-progress, React-Bootstrap's progress bar is more opinionated in terms of styling but offers a quick way to integrate Bootstrap-styled components.

material-ui

Material-UI is a popular React component library that implements Google's Material Design. It includes a `LinearProgress` component for progress bars. Material-UI's progress bar is highly customizable and comes with built-in theming support. It is more feature-rich in terms of design options compared to @radix-ui/react-progress.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It includes a `Progress` component that is styled according to Semantic UI's design principles. This package offers a more comprehensive set of UI components but is less flexible in terms of unstyled, customizable components compared to @radix-ui/react-progress.

README

react-progress

Installation

$ yarn add @radix-ui/react-progress
# or
$ npm install @radix-ui/react-progress

Usage

View docs here.