NextUI

import { NextUIProvider } from '@nextui-org/react';
import { Button, Card, CardBody, Input } from '@nextui-org/react';

function App() {
  return (
    <NextUIProvider>
      <Card className="max-w-md mx-auto mt-8">
        <CardBody>
          <h2 className="text-2xl font-bold mb-4">نموذج</h2>
          <Input
            label="الاسم"
            placeholder="أدخل اسمك"
            className="mb-4"
          />
          <Input
            label="البريد الإلكتروني"
            type="email"
            placeholder="email@example.com"
            className="mb-4"
          />
          <Button color="primary" className="w-full">
            إرسال
          </Button>
        </CardBody>
      </Card>
    </NextUIProvider>
  );
}

// Button variants
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="success">Success</Button>
<Button color="warning">Warning</Button>
<Button color="danger">Danger</Button>

// With icons
import { HeartIcon } from '@nextui-org/react';

<Button startContent={<HeartIcon />}>مفضلة</Button>

// Modal
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from '@nextui-org/react';

function MyModal() {
  const { isOpen, onOpen, onOpenChange } = useDisclosure();

  return (
    <>
      <Button onPress={onOpen}>افتح</Button>
      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader>عنوان</ModalHeader>
              <ModalBody>محتوى</ModalBody>
              <ModalFooter>
                <Button color="danger" variant="light" onPress={onClose}>
                  إغلاق
                </Button>
                <Button color="primary" onPress={onClose}>
                  موافق
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </>
  );
}