Components
Reshaped Progress indicator
Dot-based step indicator that takes a total amount of steps and the current activeIndex as a controlled component. Pairs with Carousel and Pagination for syncing scroll or navigation state, and supports a media color for static dark backgrounds.
import { Reshaped, View } from "reshaped/bundle";
import ProgressIndicator from "@/components/ui/reshaped-progress-indicator";
export default function Demo() {
return (
<Reshaped theme="slate">
<div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
<View
backgroundColor="black"
padding={4}
borderRadius="medium"
width={40}
align="center"
>
<ProgressIndicator total={10} />
</View>
</div>
</Reshaped>
);
}
More examples
UsageOpen page →
