Registration Form

hextastudio/ui needs your support to stay running 🫶 Help us

Preview

Login

Enter your email and password to login to your account.

Email*Password*

Installation

bash

npx hexta-ui add tabs button input

tsx

import { Tab, TabProvider, TabHeader, TabContent } from "@/components/hexta-ui/Tabs";
import { Button } from "@/components/hexta-ui/Button";
import { Input } from "@/components/hexta-ui/Input";

Login Component

tsx

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
  const [warning, setWarning] = useState(false);

  const togglePasswordVisibility = () => {
    setIsPasswordVisible(!isPasswordVisible);
  };

SignUp Component

tsx

const SignUp = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [username, setUsername] = useState("");
  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
  const [warning, setWarning] = useState(false);

  const togglePasswordVisibility = () => {
    setIsPasswordVisible(!isPasswordVisible);
  };

tsx

 <div className="max-w-[20rem] min-w-[20rem]">
  <TabProvider defaultActiveTab="1">
    <div className="flex flex-col space-y-4">
      <div className="flex gap-1 bg-zinc-950  rounded-md p-1">
        <TabHeader id="1">Login</TabHeader>
        <TabHeader id="2">SignUp</TabHeader>
      </div>
      <Tab>
        <TabContent id="1">
          <Login />