Ant Design

import { ConfigProvider, Button, Table, Form, Input, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import arEG from 'antd/locale/ar_EG';

// App with Arabic locale
function App() {
  return (
    <ConfigProvider locale={arEG} direction="rtl">
      <LoginForm />
    </ConfigProvider>
  );
}

// Login form
function LoginForm() {
  const [form] = Form.useForm();

  const handleSubmit = (values) => {
    message.success('تم تسجيل الدخول بنجاح');
    console.log(values);
  };

  return (
    <Form
      form={form}
      onFinish={handleSubmit}
      style={{ maxWidth: 400 }}
    >
      <Form.Item
        name="username"
        rules={[{ required: true, message: 'اسم المستخدم مطلوب' }]}
      >
        <Input prefix={<UserOutlined />} placeholder="اسم المستخدم" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[{ required: true, message: 'كلمة المرور مطلوبة' }]}
      >
        <Input.Password prefix={<LockOutlined />} placeholder="كلمة المرور" />
      </Form.Item>
      <Button type="primary" htmlType="submit" block>
        تسجيل الدخول
      </Button>
    </Form>
  );
}

// Table with data
const columns = [
  { title: 'الاسم', dataIndex: 'name', key: 'name' },
  { title: 'العمر', dataIndex: 'age', key: 'age' },
  { title: 'البريد', dataIndex: 'email', key: 'email' },
];

const data = [
  { key: '1', name: 'أحمد', age: 32, email: 'ahmed@example.com' },
  { key: '2', name: 'فاطمة', age: 28, email: 'fatima@example.com' },
];

function UsersTable() {
  return <Table columns={columns} dataSource={data} />;
}