---
title: Progress | UI
description: This is a generic component for low level layout needs. It is similar to a div in HTML.
pageTitle: Progress
pageDescription: This is a generic component for low level layout needs. It is similar to a div in HTML.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="components/Feedback/Progress" />

import { Progress } from './Progress';
import { transformedCode } from '../../../utils';
import { AppProvider, CodePreview, Text } from '@gluestack/design-system';

import { styled } from '@dank-style/react';

import Wrapper from '../../Wrapper';

# Installation

This command copies the `Progress` component to your project.

```jsx
npx install @gluestack-ui add progress
```

## Import

```jsx
// import the component from your component folder
import { Progress } from 'components';
```

<br />

# Basic

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
<Progress value={60} w={200}>
  <Progress.FilledTrack />
</Progress>
`,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Progress,
      },
      argsType: {},
    }}
  />
</AppProvider>
<br />

## Anatomy

The Progress component consists of the following parts:

```jsx
export default () => (
  <Progress>
    <Progress.FilledTrack />
  </Progress>
);
```

## API Reference

### Progress

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.
It has a property `value` which is a number between 0 and 100. It is used to set the progress of the progress bar.

### Progress.FilledTrack

It also inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

<br />
<br />

# Advanced

## Customizing the Progress

For customizing the Progress, you have to map styled view to Progress. You can refer [dank.style](https://dank.style/) for more information on how to use styled components.

### Usage

```jsx
// import the styles
import {
  Root,
  FilledTrack,
} from '../components/core/progress/styled-components';

// import the createProgress function
import { createProgress } from '@gluestack-ui/progress';

// Understanding the API
const Progress = createProgress({
  Root,
  FilledTrack,
});

// Using the Progress component
export default () => (
  <Progress>
    <Progress.FilledTrack />
  </Progress>
);
```

Default styling of the component can be found in the `components/core/progress` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/components/Progress/index.tsx) of the styled `Progress` component.