Chakra UI

import { ChakraProvider, Box, Button, Heading, Text, Stack } from '@chakra-ui/react';
import { useDisclosure } from '@chakra-ui/react';

function App() {
  return (
    <ChakraProvider>
      <Box p={8}>
        <Heading mb={4}>مرحباً بالعالم</Heading>
        <Stack spacing={4}>
          <Text>نص عادي</Text>
          <Button colorScheme="blue" size="lg">
            زر رئيسي
          </Button>
          <Button variant="outline" colorScheme="green">
            زر ثانوي
          </Button>
        </Stack>
      </Box>
    </ChakraProvider>
  );
}

// Style props
<Box
  bg="blue.500"
  color="white"
  p={4}
  borderRadius="md"
  _hover={{ bg: 'blue.600', cursor: 'pointer' }}
>
  محتوى قابل للنقر
</Box>

// Responsive
<Text fontSize={{ base: 'sm', md: 'md', lg: 'lg' }}>
  نص متجاوب
</Text>

// Dark mode
<Box bg="white" _dark={{ bg: 'gray.800' }} p={4}>
  يتغير تلقائياً
</Box>

// Hooks
function Modal({ children, title }) {
  const { isOpen, onOpen, onClose } = useDisclosure();
  
  return (
    <>
      <Button onClick={onOpen}>افتح</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>{title}</ModalHeader>
          <ModalBody>{children}</ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
}