This website is optimized for modern browsers. Please use Chrome, Firefox, Safari, or Edge for the best experience.
Skip to content

Shadcn/UI Demo for YouQaria

Shadcn/UI Buttons

Wrapper Component

Cards

Quran Learning Program
Our comprehensive Quran learning program for all ages

This program is designed to help students learn Quran with proper Tajweed rules and understanding of the meaning.

Form Elements

Contact Form
Get in touch with our team

Implementation Guide

To implement shadcn/ui in your YouQaria website, follow these steps:

  1. Use the wrapper component (ShadcnButtonWrapper) to maintain compatibility with your existing code
  2. Gradually replace components in your pages with shadcn/ui components
  3. Update your styling to use the new shadcn/ui theme variables
  4. Test thoroughly to ensure everything works as expected

The shadcn/ui components are now installed in your project at src/components/ui/.