Progress

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10

import { Progress } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <label htmlFor="migration-progress">Migration progress</label>
      <Progress className="" id="migration-progress" max={5} value={3} />
    </>
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7

@layer components {
  [data-uiify-progress] {
    inline-size: 100%;
    block-size: 0.5rem;
    accent-color: var(--primary);
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15

import { Progress } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <label htmlFor="migration-progress">Migration progress</label>
      <Progress
        className="block [inline-size:100%] [block-size:0.5rem] [accent-color:var(--primary)]"
        id="migration-progress"
        max={5}
        value={3}
      />
    </>
  );
}