Add docs for the client component library conventions and shared component usage

[Chucks1093]

Summary

The client has a set of shared UI components (buttons, inputs, cards, toasts, skeletons) but no documentation on when to use each, how to extend them, or what props they accept. A short reference should help contributors pick the right component without reading every implementation.

Scope

• List all shared components in the component library with a one-line description of their purpose
• For each: list the key props, describe when to use vs when to build a new component
• Include a note on the project's Tailwind class conventions used inside shared components
• Document how to add a new shared component including naming and file location conventions

Acceptance Criteria

• All shared components listed with descriptions
• Key props and usage guidance included for each
• Tailwind conventions documented
• New component addition process explained
• Document lives in docs/ and cross-links the page contribution guide

ETA: 12 hours

---

Coordinate on Telegram

[dev-king-001]

Good day Sir, can you assign me this.

[Ivenkili]

hey maintainer,
i would love to work on this kindly assign

[omoh5]

@omoh5 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Please can you assign this to me
Thank you

ℹ️ Repo Maintainers: To accept this application, review their application or assign @omoh5 to this issue.

[Ghoost-404]

@Ghoost-404 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

hello, i'd like to work on this issue please

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Ghoost-404 to this issue.

[drips-wave]

Congratulations, @Ghoost-404! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @Ghoost-404: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @Ghoost-404 as part of the Stellar Wave Program's 7th Wave 🥳

😎 @Ghoost-404: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.