Components

Explore individual components and
add them to your UI

Buttons

npx orbitkit@latest add button

Basic 1

Basic 2

Neo Brutalist 1

Retro 1

Modern 1

Tech 1

IA 1 - Glowing

IA 2 - Simple

Minimal 1

Inputs

npx orbitkit@latest add input

Basic 1

IA 1 - Glowing

Minimal 1

Retro 1

Rounded 1

Tech 1

Cards

npx orbitkit@latest add card

Glass

Neobrutalist

Retro

Elegant Dark

Tech

Avatars

npx orbitkit@latest add avatar

Dot - Online 1

Dot - Online 2

Tech 1

Basic 1

Badges

npx orbitkit@latest add badge

Basic 1

Basic 2 - Hover

IA 1

Admin 1

Plan 1 - Free

Plan 2 - Pro

Plan 3 - Blocked

Plan 4 - Temporal

Night Mode 1

Alerts

npx orbitkit@latest add alert

Basic 1

IA Alert 1

Warning 1

Danger 1

Success 1

Info 1

Experimental 1

Basic Plan

Upgrade to unlock premium features.

---
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
---

<Alert class="border-slate-600 bg-slate-700/20 text-slate-300">
  <AlertTitle>Basic Plan</AlertTitle>
  <AlertDescription>
    Upgrade to unlock premium features.
  </AlertDescription>
</Alert>

Alert-basic-1.astro

AI Activated

You are currently using enhanced AI features.

---
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
---

<Alert class="border-indigo-600 bg-indigo-700/20 text-indigo-300">
  <AlertTitle class="flex gap-1">
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="size-4"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6z" /></svg>
    AI Activated
  </AlertTitle>
  <AlertDescription>
    You are currently using enhanced AI features.
  </AlertDescription>
</Alert>

Alert-alert-ia-1.astro

Warning

Please double-check before proceeding.

---
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
---

<Alert class="border-yellow-500 bg-yellow-500/10 text-yellow-300">
  <AlertTitle class="flex gap-1">
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="size-4"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9v4" /><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" /><path d="M12 16h.01" /></svg>
    Warning
  </AlertTitle>
  <AlertDescription>
    Please double-check before proceeding.
  </AlertDescription>
</Alert>

Alert-warning-1.astro

Error

Something went wrong. Please try again.

---
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
---

<Alert class="border-red-600 bg-red-600/10 text-red-300">
  <AlertTitle class="flex gap-1">
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="size-4"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>
    Error
</AlertTitle>
  <AlertDescription>
    Something went wrong. Please try again.
  </AlertDescription>
</Alert>

Alert-danger-1.astro

Success

Everything went smoothly. You're good to go!

---
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
---

<Alert class="border-green-600 bg-green-600/10 text-green-300">
  <AlertTitle class="felx gap-1">
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="size-4"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 12l2 2l4 -4" /></svg>
    Success
</AlertTitle>
  <AlertDescription>
    Everything went smoothly. You're good to go!
  </AlertDescription>
</Alert>

Alert-success-1.astro

Info

This is a general notification.

---
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
---

<Alert class="border-blue-500 bg-blue-500/10 text-blue-300">
  <AlertTitle class="felx gap-1">
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="size-4"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>
    Info
</AlertTitle>
  <AlertDescription>
    This is a general notification.
  </AlertDescription>
</Alert>

Alert-info-1.astro

Experimental Feature

This is a beta feature. Use at your own risk.

---
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
---

<Alert class="border-purple-600 bg-purple-700/20 text-purple-300">
  <AlertTitle>Experimental Feature</AlertTitle>
  <AlertDescription>
    This is a beta feature. Use at your own risk.
  </AlertDescription>
</Alert>

Alert-experimental-1.astro

YOU

---
import {Avatar, AvatarImage, AvatarFallback} from "@/components/ui/avatar";
---

<div class="flex gap-2">
  <div class="relative w-fit">
    <Avatar>
      <AvatarImage src="https://i.pravatar.cc/300" alt="Avatar" />
      <AvatarFallback>YOU</AvatarFallback>
    </Avatar>
    <span class="absolute z-10 top-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
  </div>
  <div class="relative w-fit">
    <Avatar variant="square">
      <AvatarImage src="https://i.pravatar.cc/300" alt="Avatar" />
      <AvatarFallback>YOU</AvatarFallback>
    </Avatar>
    <span class="absolute z-10 -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
  </div>
</div>

Avatar-dot-online-1-simple.astro

YOU

---
import {Avatar, AvatarImage, AvatarFallback} from "@/components/ui/avatar";
---

<div class="flex gap-2">
<div class="relative w-fit">
  <Avatar class="ring-2 ring-indigo-500">
    <AvatarImage src="https://i.pravatar.cc/300" alt="Avatar" />
    <AvatarFallback>YOU</AvatarFallback>
  </Avatar>
  <span class="absolute z-10 top-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white animate-pulse"></span>
  <span class="absolute z-10 top-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white animate-pulse"></span>
</div>
<div class="relative w-fit">
  <Avatar variant="square" class="ring-2 ring-indigo-500">
    <AvatarImage src="https://i.pravatar.cc/300" alt="Avatar" />
    <AvatarFallback>YOU</AvatarFallback>
  </Avatar>
  <span class="absolute z-10 -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white animate-pulse"></span>
  <span class="absolute z-10 -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white animate-pulse"></span>
</div>
</div>

Avatar-dot-online-2-pulse.astro

YOU

---
import {Avatar, AvatarImage, AvatarFallback} from "@/components/ui/avatar";
---

<Avatar class="ring ring-purple-500 ring-offset-2 ring-offset-black shadow-[0_0_10px_2px_rgba(168,85,247,0.6)]">
  <AvatarImage src="https://i.pravatar.cc/300" alt="Avatar" />
  <AvatarFallback>YOU</AvatarFallback>
</Avatar>

Avatar-avatar-tech-1.astro

YOU

---
import {Avatar, AvatarImage, AvatarFallback} from "@/components/ui/avatar";
---
    <Avatar class="bg-white/20 ring-2 ring-white/30">
      <AvatarImage src="https://i.pravatar.cc/300" alt="Avatar" />
      <AvatarFallback class="text-white">YOU</AvatarFallback>
    </Avatar>
</span>

Avatar-avatar-basic-1.astro

Basic 2

---
import {Badge} from "@/components/ui/badge";
---

<Badge class="bg-slate-600/50 border border-slate-500 hover:bg-slate-600/60 hover:border-slate-600 transition-all duration-300">Basic 2</Badge>

Badge-basic-2-hover.astro

IA Power

---
import {Badge} from "@/components/ui/badge";
---

<Badge class="flex gap-1 items-center bg-gradient-to-r from-indigo-600/50 to-violet-600/50 border border-indigo-500 hover:from-indigo-600 hover:to-violet-600 hover:border-indigo-600 transition-all duration-300 text-white ">
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon mt-0.5"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6z" /></svg>
  IA Power
</Badge>

Badge-ia-1.astro

Admin Secure

---
import { Badge } from "@/components/ui/badge";
---

<Badge class="bg-emerald-700/30 border border-emerald-500 text-emerald-200">
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="mt-0.5"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3" /></svg>
Admin Secure
</Badge>

Badge-admin-1-shield.astro

Pro Access

---
import { Badge } from "@/components/ui/badge";
---

<Badge class="bg-yellow-500/10 border border-yellow-500 text-yellow-300 font-semibold">
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-bolt"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11" /></svg>
Pro Access
</Badge>

Badge-plan-2-pro.astro

Premium Only

---
import { Badge } from "@/components/ui/badge";
---

<Badge class="bg-rose-600/30 border border-rose-500 text-rose-100">
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="mt-0.5"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z" /><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /><path d="M8 11v-4a4 4 0 1 1 8 0v4" /></svg>
  Premium Only
</Badge>

Badge-plan-3-blocked.astro

Trial Active

---
import { Badge } from "@/components/ui/badge";
---

<Badge class="bg-orange-500/20 border border-orange-400 text-orange-300">
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="mt-0.5"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 7v5l3 3" /></svg>
Trial Active
</Badge>

Badge-plan-4-temporal.astro

Night Mode

---
import { Badge } from "@/components/ui/badge";
---

<Badge class="bg-black/30 border border-slate-800 text-slate-200">
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="mt-0.5"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
Night Mode
</Badge>

Badge-night-mode-1.astro

---
import { Button } from "@/components/ui/button";
import { contentDefault } from "../blockConst"
---

  <Button class="bg-slate-500 border border-gray-400 rounded-lg hover:bg-slate-500/90 hover:border-gray-600 transition-all duration-300">Get Started</Button>

Button-basic-1.astro

---
import { Button } from "@/components/ui/button";
import { contentDefault } from "../blockConst"
---

  <Button class="bg-transparent text-white hover:text-black border border-gray-400 rounded-lg hover:bg-slate-500/90 hover:border-gray-600 transition-all duration-300">{contentDefault}</Button>

Button-basic-2.astro

---
import { Button } from "@/components/ui/button";
---
<Button class="bg-white text-black border-2 border-black font-bold px-6 py-2 shadow-[4px_4px_0_0_black] hover:border-black hover:scale-105  hover:bg-gray-100 transition-all duration-300">
  Neo-Brutalist
</Button>

Button-neoBrutalist-1.astro

---
import { Button } from "@/components/ui/button";
---
<Button class="bg-yellow-400 text-pink-800 font-bold border-2 border-pink-700 rounded-none shadow-[4px_4px_0_0_rgba(0,0,0,1)] hover:bg-yellow-300 transition duration-300">
  Retro
</Button>

Button-retro-1.astro

---
import { Button } from "@/components/ui/button";
---


<Button class="bg-gradient-to-tr from-indigo-500 to-purple-500 text-white border border-sky-700 hover:border-sky-600 font-medium px-6 py-2 rounded-xl hover:scale-105 hover:shadow-xl transition duration-300">
  Modern
</Button>

Button-modern-1.astro

---
import { Button } from "@/components/ui/button";
---
<Button class="bg-black text-green-400 font-mono border border-green-500 rounded-md px-4 py-2 hover:bg-green-900/10 hover:text-green-300 transition-all duration-300">
  Tech
</Button>

Button-tech-1.astro

---
import { Button } from "@/components/ui/button";
---
<div class="relative group">
    <div class="absolute -inset-0.5 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full blur opacity-50 group-hover:opacity-100 transition duration-300"></div>
    <div class="relative z-10 p-0.5">
    <Button class="bg-gradient-to-r from-blue-700 via-indigo-500 to-fuchsia-500 border-none text-white rounded-full px-6 py-2 shadow-lg hover:brightness-125 transition-all duration-300">
        Get Started
    </Button>
    </div>
</div>

Button-ia-1-glowing.astro

---
import { Button } from "@/components/ui/button";
---

<Button class="bg-gradient-to-r from-blue-700 via-indigo-500 to-fuchsia-500 border-none text-white rounded-full px-6 py-2 shadow-lg hover:brightness-125 transition-all duration-300">
    Get Started
</Button>

Button-ia-2-simple.astro

---
import { Button } from "@/components/ui/button";
import { contentDefault } from "../blockConst"
---

<Button class="bg-gray-900 text-white border border-gray-700 rounded-lg hover:bg-gray-800 hover:shadow-lg transition duration-300">
  {contentDefault}
</Button>

Button-minimal-1.astro

Soft dreams

Adaptive. Predictive. Intuitive.

Last update: 2s ago

---
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
---

<Card class="bg-white/5 backdrop-blur-lg border border-white/20 shadow-lg text-white">
  <CardHeader>
    <CardTitle class="text-sky-300">Soft dreams</CardTitle>
    <CardDescription class="text-white/70">Powered by ACME</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Adaptive. Predictive. Intuitive.</p>
  </CardContent>
  <CardFooter>
    <p>Last update: 2s ago</p>
  </CardFooter>
</Card>

Cards-card-1-glass.astro

Brutalist

Loud. Unapologetic.

All about bold contrast.

#raw-ui

---
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
---

<Card class="bg-white border-2 border-black shadow-[6px_6px_0_#000] text-black rounded-none">
  <CardHeader>
    <CardTitle class="font-bold uppercase">Brutalist</CardTitle>
    <CardDescription class="text-gray-800">Loud. Unapologetic.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>All about bold contrast.</p>
  </CardContent>
  <CardFooter>
    <p>#raw-ui</p>
  </CardFooter>
</Card>

Cards-card-neobrutalist-1.astro

Retro Card

Old-school vibes.

Looks like an MS Paint window.

Click me maybe?

---
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
---

<Card class="bg-[#fff5e1] border-2 text-gray-500 border-black rounded-none shadow-[4px_4px_0_0_#000] font-mono text-sm">
  <CardHeader>
    <CardTitle class="text-black">Retro Card</CardTitle>
    <CardDescription class="text-black/70">Old-school vibes.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Looks like an MS Paint window.</p>
  </CardContent>
  <CardFooter>
    <p>Click me maybe?</p>
  </CardFooter>
</Card>

Cards-retro-1.astro

Plan Nova

$20

All access guaranteed

Premium experience.

---
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
---

<Card class="bg-gradient-to-b from-zinc-900 to-zinc-800 border border-zinc-700 text-white hover:shadow-md transition-shadow duration-300 rounded-xl">
  <CardHeader>
    <CardTitle class="text-white">Plan Nova</CardTitle>
    <CardDescription class="text-zinc-400">$20</CardDescription>
  </CardHeader>
  <CardContent>
    <p>All access guaranteed</p>
  </CardContent>
  <CardFooter class="text-zinc-400">
    <p>Premium experience.</p>
  </CardFooter>
</Card>

Cards-elegant-1-dark.astro

Server Stats

System diagnostics active

RAM: 16GB DDR4
GPU: NVIDIA RTX 3060
Storage: 512GB SSD

CPU: 86%

---
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
---

<Card class="bg-black border border-cyan-500/30 shadow-[0_0_20px_2px_rgba(34,211,238,0.2)] text-cyan-300 font-mono">
  <CardHeader>
    <CardTitle>Server Stats</CardTitle>
    <CardDescription>System diagnostics active</CardDescription>
  </CardHeader>
  <CardContent>
    <ul class="list-disc pl-5 space-y-1">
        <li>RAM: 16GB DDR4</li>
        <li>GPU: NVIDIA RTX 3060</li>
        <li>Storage: 512GB SSD</li>
    </ul>
  </CardContent>
  <CardFooter>
    <p>CPU: 86%</p>
  </CardFooter>
</Card>

Cards-card-tech-1.astro

---
import { Input } from "@/components/ui/input";
---

<Input
    class="w-full bg-slate-800 text-white border border-slate-600 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-sky-500 transition"
    type="email"
    name="email"
    id="email"
    placeholder=name@company.com
    required
/>

Input-basic-1.astro

---
import { Input } from "@/components/ui/input";

---

<div class="relative group w-full">
    <div class="absolute -inset-0.5 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg blur opacity-50 group-hover:opacity-100 transition duration-300"></div>
    <div class="relative">
        <Input
            class="w-full bg-black/80 backdrop-blur-sm border border-gray-700 rounded-lg px-4 py-3 text-gray-100 placeholder:text-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
            type="email"
            name="email-tech"
            id="email-tech"
            placeholder=name@company.com
            required
        />
        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-8.486 8.486l4.243 4.243 4.243-4.243a6 6 0 000-8.486zm-1.414 7.072l-2.829 2.829-2.829-2.829a4 4 0 115.657-5.657 4 4 0 010 5.657z" clip-rule="evenodd" />
            </svg>
        </div>
    </div>
    <div class="absolute -bottom-2 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-blue-500 to-transparent scale-x-0 group-hover:scale-x-100 transition-transform duration-500"></div>
</div>

Input-ia-1-glowing.astro

---
import { Input } from "@/components/ui/input";

---

<Input
    class=" border-0 border-b-2 border-gray-300 focus:border-blue-500 rounded-none px-4 transition-all duration-300 bg-transparent text-gray-100 placeholder:text-gray-500 focus:ring-0"
    type="email"
    name="email-minimal"
    id="email-minimal"
    placeholder=name@company.com
    required
/>

Input-minimal-1.astro

---
import { Input } from "@/components/ui/input";

---

<Input
    class="w-full bg-black text-pink-300 border border-pink-500 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-pink-400 placeholder-pink-600 transition"
    type="email"
    name="email"
    id="email"
    placeholder=name@company.com
    required
/>

Input-retro-1.astro

---
import { Input } from "@/components/ui/input";

---

<div class="relative flex justify-center w-full">
    <Input
        class="bg-gray-800/70 border-2 border-gray-600 rounded-full px-5 py-3 text-gray-100 placeholder:text-gray-400 focus:border-indigo-400 focus:ring focus:ring-indigo-300 focus:ring-opacity-30 transition-all duration-300"
        type="email"
        name="email-rounded"
        id="email-rounded"
        placeholder=name@company.com
        required
    />
    <button type="submit" class="cursor-pointer absolute right-2 top-1.5 bg-indigo-500 hover:bg-indigo-600 text-white rounded-full p-2 transition-colors duration-300">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
    </button>
</div>

Input-rounded-1.astro

Don't miss the latest news

---
import { Input } from "@/components/ui/input";

---

<div class="w-full border border-cyan-500 rounded-xl bg-gradient-to-r from-[#0f172a] via-[#1e293b] to-[#0f172a] p-6 shadow-lg shadow-cyan-700/30 transition-transform ">
    <header class="mb-3">
    <h3 class="text-xl font-extrabold text-cyan-400 tracking-tight">Newsletter</h3>
    <p class="text-sm text-slate-400">Don't miss the latest news</p>
    </header>

    <Input
    class="w-full bg-[#020617] text-cyan-200 border border-cyan-600 rounded-lg px-4 py-2 shadow-inner focus:outline-none focus:ring-2 focus:ring-cyan-400 placeholder-cyan-500 transition-all"
    type="email"
    name="email"
    id="email"
    placeholder=name@company.com
    required
    />
</div>

Input-tech-1.astro

Explore blocks!

blocks weekly