Skip to content

feat(component): add Progress component#54

Open
alirezanaseri548 wants to merge 1 commit into
tailwiinder:mainfrom
alirezanaseri548:feat/progress-component
Open

feat(component): add Progress component#54
alirezanaseri548 wants to merge 1 commit into
tailwiinder:mainfrom
alirezanaseri548:feat/progress-component

Conversation

@alirezanaseri548

Copy link
Copy Markdown

Description

Adds a new Progress component to the template library, implementing the request in #30.

It renders a horizontal progress bar that represents the completion percentage (0–100) of a task. The API mirrors shadcn/ui's Progress (a value prop from 0 to 100) so it feels familiar to web contributors, while rendering native Views.

Closes #30

What's added

  • packages/cli/templates/progress/index.tsx — the Progress component
  • packages/cli/templates/progress/styles.ts — light/dark class names following the project's theming convention

Implementation notes

  • Follows existing conventions: uses the same index.tsx + styles.ts folder layout and the cn utility as the other templates (e.g. badge, card, aspectratio).
  • Light/dark theming: mode prop toggles between bg-primary/bg-secondary (light) and bg-dark-primary/bg-dark-secondary (dark).
  • Value clamping: value is clamped to [0, 100] so the indicator never overflows the track or collapses to a negative width.
  • Accessible: sets accessibilityRole="progressbar" with accessibilityValue={{ min: 0, max: 100, now }} so screen readers announce progress correctly.
  • Extensible: supports className (track) and indicatorClassName (fill), and spreads the rest of ViewProps.

Usage

import { Progress } from './progress';

<Progress value={60} />
<Progress value={60} mode="dark" />

How Has This Been Tested?

  • tsc --noEmit passes with no errors.
  • turbo run build succeeds.
  • prettier --write applied; files match the repo's formatting.
  • Manually reviewed the rendering logic and class names against existing components (badge, card, aspectratio) for consistency.

Screenshots / Recording

This PR only adds template files consumed by the CLI; visual verification can be done by adding the component to the examples app on request.

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • I have read the CONTRIBUTING document

Resolves tailwiinder#30

Add a horizontal Progress bar component following the project's
light/dark theming and cn-based className convention. It mirrors the
shadcn/ui Progress API (a 0-100 value prop) while rendering native
Views, clamps out-of-range values, and exposes accessibility props.

- packages/cli/templates/progress/index.tsx: Progress component
- packages/cli/templates/progress/styles.ts: light/dark class names
@vercel

vercel Bot commented Jun 27, 2026

Copy link
Copy Markdown

@alirezanaseri548 is attempting to deploy a commit to the major tom's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(component): Add Progress component

1 participant