Conversation
- Add Status component with composable API (Status, StatusIndicator, StatusLabel) - Built on Badge component foundation using data-slot pattern - Support for 5 variants: default, success, error, warning, info - Beautiful ping animation on indicator with Tailwind animate-ping - Add status-demo example showcasing all variants - Register component in registry-ui.ts and registry-examples.ts
- Add TypeScript type definitions for Status component API - Create additional examples: - status-variants-demo: showcase all color variants - status-text-only-demo: status without indicators - status-list-demo: service health dashboard example - Add comprehensive MDX documentation with: - Installation instructions (CLI and manual) - Layout and composition examples - Complete API reference with type tables - Accessibility guidelines - Credit to Tailwind CSS for animate-ping inspiration - Update registry-examples.ts with new demo entries
- Replace space-y with flex flex-col gap in status-list-demo - Reduce items and spacing in status-variants-demo to fit 420px height - Optimize layout for ComponentTabs height constraint
- status-list-demo: reduce items and tighten spacing (p-3, gap-0.5) - status-variants-demo: add responsive design with hidden sm:block - Add more variant examples (3 per category) with better descriptions - Improve spacing for better visual hierarchy (gap-6, gap-3)
- Refine status demo examples - Update generated registry JSON files
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a new Status component to the UI registry for displaying visual status indicators with color variants and animated ping effects, commonly used for system states, user presence, and service health monitoring.
- Implements a flexible status badge component with 5 color variants (default, success, error, warning, info)
- Includes 3 sub-components: Status (container), StatusIndicator (animated dot), and StatusLabel (text)
- Provides 4 demonstration examples showing different use cases
Reviewed changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| docs/registry/default/ui/status.tsx | Main component implementation with variants and sub-components |
| docs/types/docs/status.ts | TypeScript type definitions for Status component props |
| docs/registry/registry-ui.ts | Registry entry for the status UI component |
| docs/registry/registry-examples.ts | Registry entries for 4 status demo examples |
| docs/registry/default/examples/status-demo.tsx | Basic demo showing all 5 status variants |
| docs/registry/default/examples/status-variants-demo.tsx | Comprehensive showcase of all variants with different labels |
| docs/registry/default/examples/status-text-only-demo.tsx | Demo showing status badges without indicators |
| docs/registry/default/examples/status-list-demo.tsx | Practical example displaying service status list |
| docs/public/r/*.json | Generated JSON registry files for component distribution |
| docs/content/docs/components/status.mdx | Complete documentation with API reference and examples |
| docs/app/(lobby)/pg/page.tsx | Playground page updated to showcase status demos |
| docs/registry/index.tsx | Registry index updated with status component entries |
| docs/content/docs/components/stack.mdx | Minor documentation wording improvement (unrelated) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.