UI Components Library
A complete collection of reusable React components for building beautiful interfaces.
← Back to HomeTypography
Heading 1
Heading 2
Heading 3
Heading 4
Regular text paragraph with default styling.
Large text for emphasis.
Small muted text for secondary information.
Caption text for images or descriptionsThis is a blockquote for featured quotes or testimonials.
Layout
1
2
3
Left
Center
Right
OR
Buttons
Forms
▼
Cards
Basic Card
This is a simple card with header, body, and footer.
Outlined Card
Card with outline variant styling.
150+
Projects Completed
Feedback
DefaultSuccessWarningErrorInfo
65%
This is a tooltip!
Alerts
Information
This is an info alert message.
Success
Your changes have been saved!
Warning
Please review before proceeding.
Error
Something went wrong.
Tags & Chips
DefaultPrimarySuccessRemovableError
Default
Primary
Success
Warning
Error
Outlined
With Delete
Selected
Interactive Controls
Small
Medium
Large
5
Navigation
Media
JD
JD
JD
JS
JD
Overlays
Modal Title
This is modal content. You can put anything here.
Drawer Title
This is drawer content. Slides in from the side.
Accordion
A collection of reusable React components built with TypeScript and SCSS modules.
Import components from @/components/ui and use them in your pages.
Yes! All components use CSS custom properties for easy theming.
Empty State
📭
No items found
Start by adding your first item to see it appear here.