Skip to content

✨ feat: add skeleton component#104

Merged
MarcosvBueno merged 5 commits intodevelopfrom
feat-add-skeleton-component
Jan 23, 2026
Merged

✨ feat: add skeleton component#104
MarcosvBueno merged 5 commits intodevelopfrom
feat-add-skeleton-component

Conversation

@lucasadsr
Copy link
Member

This pull request introduces comprehensive documentation and example usage for the Skeleton component, along with a refactor that adds support for both pulse and shimmer animation variants. It also registers the Skeleton component in the documentation system and components index, making it fully discoverable and accessible within the UI library.


🧩 Skeleton Component Enhancements

  • Refactored the Skeleton component in skeleton.tsx to support both pulse and shimmer animation variants.
  • Leveraged class-variance-authority to enable flexible and scalable styling.
  • Added a custom shimmer animation using keyframes to provide a more polished loading effect.
    (src/components/ui/skeleton.tsx)

📚 Documentation and Examples

  • Added detailed documentation for the Skeleton component, including:
    • Usage guidelines and best practices
    • Accessibility considerations
    • Animation variants
    • Component props
    • Multiple code examples with live previews
      (src/components/docs/contents/skeleton/skeleton.tsx)
  • Implemented a comprehensive set of practical examples demonstrating common loading UI patterns, such as:
    • Basic usage
    • Animation variants
    • Profile layout
    • Product card
    • Article list
      (src/components/docs/contents/skeleton/skeleton-examples.tsx)

🗂️ Documentation System Integration

  • Registered the Skeleton documentation in the component details registry, enabling proper lookup and rendering in the documentation site.
    (src/lib/docs/component-details.tsx)
  • Added the Skeleton component to the components index with relevant metadata, including tags, category, and dependencies, ensuring it appears correctly in the UI library navigation.
    (src/lib/docs/components-index.ts)

✅ Result

These changes make the Skeleton component more powerful, flexible, and easier to adopt, while significantly improving its discoverability and documentation quality within the UI library.

@lucasadsr lucasadsr self-assigned this Jan 23, 2026
@vercel
Copy link

vercel bot commented Jan 23, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
ui Ready Ready Preview, Comment Jan 23, 2026 4:42pm

Copy link
Contributor

@MarcosvBueno MarcosvBueno left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@MarcosvBueno MarcosvBueno merged commit 8564351 into develop Jan 23, 2026
2 checks passed
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.

2 participants