;

Examples

Here are some example use cases for PragatiUI components:

Login Form

import React, { useState } from 'react';
import { Card, Input, Button } from 'pragatiui';

const LoginForm: React.FC = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle login logic here
    console.log('Login submitted:', { username, password });
  };

  return (
    <Card className="p-6 max-w-sm mx-auto">
      <h2 className="text-2xl font-bold mb-4">Login</h2>
      <form onSubmit={handleSubmit}>
        <Input
          type="text"
          placeholder="Username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          className="mb-4"
        />
        <Input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          className="mb-4"
        />
        <Button type="submit" className="w-full">
          Submit
        </Button>
      </form>
    </Card>
  );
};

export default LoginForm;

You can quickly set up this example using the CLI:

# Add required components
npx pragatiui-cli add card input button

# Create a new file for the login form
touch LoginForm.tsx

# Now you can copy the code above into LoginForm.tsx