[FE-45] Build a shared UI component library on Radix primitives

[mftee]

Overview

@radix-ui/react-slot, class-variance-authority, clsx, and tailwind-merge are already installed (the standard shadcn/ui pattern) but no components/ui directory exists yet. Every page in this plan needs consistent Button, Input, Card, Badge, and Modal/Toast components rather than each page reinventing markup.

Acceptance Criteria

• Create components/ui/ with Button, Input, Card, Badge, Dialog (Modal), and Toast components, using cva for variants and tailwind-merge for class composition
• Components are theme-aware (light/dark via Tailwind's dark: variant)
• Each component has a minimal set of variants documented via TypeScript prop types
• At least one render test per component using the already-configured @testing-library/react + jest

[Chinonso-Peter]

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

Can i work on this issue

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

[abdulquadri123]

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

Hey Maintainer,
As a blockchain developer, I will delighted to handle this issue and solve it diligently once assigned to me.
Thanks.

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

[feyishola]

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

Hello im Feyishola a software developer with over 5 years of experience. please i would love to handle this issue

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

[drips-wave]

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

🧑‍💻 @feyishola: 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 @feyishola as part of the Stellar Wave Program's 7th Wave 🥳

😎 @feyishola: 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.