NotSimpleUIComponentsFolders
Progress Folder
An interactive folder component that displays progress and animated layers on hover with a hidden signature reveal.
Preview
Your Process
You're Doing Great !
78%
Installation
import { ProgressFolder } from "@/components/folders";
export default function Example() {
return <ProgressFolder progress={78} subtitle="Your Process" title="You're Doing\nGreat !" />;
}Component Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
progress | number | 78 | The percentage value to display |
subtitle | string | "Your Process" | The small orange text above the title |
title | string | "You're Doing\nGreat !" | The main text displayed on the folder front |