# Register 1

> register

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/register-1).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/register-1
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/register-1/light.png
- Registry item: https://blocks.cnippet.dev/r/register-1.json
- Categories: register
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/register-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `@cnippet/button`, `@cnippet/checkbox`, `@cnippet/input`, `@cnippet/label`, `@cnippet/utils`

## Files

### `registry/default/sections/register-1.tsx`

```tsx
"use client";

import { Eye, EyeOff } from "lucide-react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

// Spark Logo
function SparkLogo({ className }: { className?: string }) {
  return (
    <div className={cn("flex items-center gap-2", className)}>
      <svg className="h-8 w-8" viewBox="0 0 32 32">
        <path d="M16 2L8 10h6v8H8l8 8 8-8h-6v-8h6L16 2z" fill="currentColor" />
      </svg>
      <span className="font-semibold text-2xl text-neutral-900">Spark</span>
    </div>
  );
}

// Google Icon
function GoogleIcon({ className }: { className?: string }) {
  return (
    <svg className={cn("h-5 w-5", className)} viewBox="0 0 24 24">
      <path
        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
        fill="#4285F4"
      />
      <path
        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
        fill="#34A853"
      />
      <path
        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
        fill="#FBBC05"
      />
      <path
        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
        fill="#EA4335"
      />
    </svg>
  );
}

// Decorative wave shape
function WaveDecoration({ className }: { className?: string }) {
  return (
    <svg
      className={cn("pointer-events-none absolute", className)}
      fill="none"
      viewBox="0 0 400 400"
    >
      <path
        d="M0 200 Q100 100 200 200 Q300 300 400 200"
        fill="none"
        opacity="0.5"
        stroke="#e5e5e5"
        strokeWidth="80"
      />
    </svg>
  );
}

export function Register1() {
  const [showPassword, setShowPassword] = React.useState(false);
  const [agreeTerms, setAgreeTerms] = React.useState(false);

  return (
    <section className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-gray-50 px-4 py-12 dark:bg-neutral-900">
      {/* Decorative elements */}
      <WaveDecoration className="top-0 right-0 h-96 w-96 translate-x-1/2 -translate-y-1/4 rotate-45 dark:opacity-50" />
      <WaveDecoration className="bottom-0 left-0 h-96 w-96 -translate-x-1/2 translate-y-1/4 -rotate-45 dark:opacity-50" />

      <div className="relative z-10 w-full max-w-xl">
        {/* Logo */}
        <div className="mb-8 flex justify-center">
          <SparkLogo />
        </div>

        {/* Header */}
        <div className="mb-8 text-center">
          <h1 className="mb-2 font-normal text-3xl text-gray-900 md:text-4xl dark:text-gray-100">
            Create new account
          </h1>
          <p className="text-gray-600 text-sm dark:text-gray-400">
            Already have an account?{" "}
            <a
              className="font-medium text-gray-900 underline dark:text-gray-100"
              href="#"
            >
              Sign in
            </a>
          </p>
        </div>

        {/* Google Sign Up */}
        <Button
          className="mb-8 h-14 w-full rounded-xl border-gray-200 bg-white text-sm hover:bg-gray-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:bg-neutral-700"
          variant="outline"
        >
          <GoogleIcon className="mr-3" />
          <span className="font-medium text-gray-700 dark:text-gray-300">
            Sign up with Google
          </span>
        </Button>

        {/* Form */}
        <form className="space-y-5">
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div>
              <Label className="mb-2 block font-medium text-gray-700 text-sm dark:text-gray-300">
                Full Name <span className="text-violet-500">*</span>
              </Label>
              <Input
                className="h-14 rounded-xl border-gray-200 dark:border-neutral-700 dark:bg-black dark:text-white dark:placeholder:text-gray-400"
                placeholder="Enter Your Name"
                type="text"
              />
            </div>
            <div>
              <Label className="mb-2 block font-medium text-gray-700 text-sm dark:text-gray-300">
                Email <span className="text-violet-500">*</span>
              </Label>
              <Input
                className="h-14 rounded-xl border-gray-200 dark:border-neutral-700 dark:bg-black dark:text-white dark:placeholder:text-gray-400"
                placeholder="Enter your email"
                type="email"
              />
            </div>
          </div>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div>
              <Label className="mb-2 block font-medium text-gray-700 text-sm dark:text-gray-300">
                Phone Number <span className="text-violet-500">*</span>
              </Label>
              <Input
                className="h-14 rounded-xl border-gray-200 dark:border-neutral-700 dark:bg-black dark:text-white dark:placeholder:text-gray-400"
                placeholder="Enter Your Number"
                type="tel"
              />
            </div>
            <div>
              <Label className="mb-2 block font-medium text-gray-700 text-sm dark:text-gray-300">
                Company Name <span className="text-violet-500">*</span>
              </Label>
              <Input
                className="h-14 rounded-xl border-gray-200 dark:border-neutral-700 dark:bg-black dark:text-white dark:placeholder:text-gray-400"
                placeholder="Enter Company Name"
                type="text"
              />
            </div>
          </div>

          <div>
            <Label className="mb-2 block font-medium text-gray-700 text-sm dark:text-gray-300">
              Create Password <span className="text-violet-500">*</span>
            </Label>
            <div className="relative">
              <Input
                className="h-14 rounded-xl border-gray-200 pr-12 dark:border-neutral-700 dark:bg-black dark:text-white dark:placeholder:text-gray-400"
                placeholder="Password"
                type={showPassword ? "text" : "password"}
              />
              <button
                className="absolute top-1/2 right-4 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
                onClick={() => setShowPassword(!showPassword)}
                type="button"
              >
                {showPassword ? (
                  <Eye className="h-5 w-5" />
                ) : (
                  <EyeOff className="h-5 w-5" />
                )}
              </button>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <Checkbox
              checked={agreeTerms}
              className="rounded-full border-gray-200 dark:border-neutral-700"
              id="terms-spark"
              onCheckedChange={(checked) => setAgreeTerms(checked as boolean)}
            />
            <Label
              className="text-gray-600 text-sm dark:text-gray-400"
              htmlFor="terms-spark"
            >
              I agree with{" "}
              <a className="font-medium underline" href="#">
                Terms and Conditions
              </a>
            </Label>
          </div>

          <Button
            className="h-14 w-full rounded-xl bg-violet-600 font-medium text-white hover:bg-violet-700 dark:bg-violet-600 dark:hover:bg-violet-700"
            type="submit"
          >
            Register
          </Button>
        </form>

        {/* Footer */}
        <p className="mt-6 text-center text-gray-600 text-sm dark:text-gray-400">
          Having trouble signing up?{" "}
          <a
            className="font-medium text-gray-900 underline dark:text-gray-100"
            href="#"
          >
            Contact us
          </a>
        </p>
      </div>
    </section>
  );
}

export default Register1;
```