Todos os componentes

Animated Gradient Border

Animated Gradient Border é um componente de fundo para React e Tailwind CSS, da biblioteca Bund UI, com licença MIT. Copia e cola no teu projeto.

Bund UI MIT backgrounds

O que é

Animated Gradient Border é um componente de fundo para React e Tailwind CSS, da biblioteca Bund UI, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Não precisa de pacotes além do que o projeto já tem

Licença

Este componente vem de Bund UI e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Animated Gradient Border

examples/motion/components/animated-gradient-border/01/gradient-border.tsx

import React from "react";
import { cn } from "@/lib/utils";

export type Props = {
  children: React.ReactNode;
  className?: string;
};

export default function GradientBorder({ children, className }: Props) {
  return (
    <div
      className={cn(
        "animate-border overflow-hidden rounded-xl border border-transparent [background:linear-gradient(45deg,transparent,transparent_50%,transparent)_padding-box,conic-gradient(from_var(--border-angle),transparent_80%,_theme(colors.indigo.500)_86%,_theme(colors.indigo.700)_90%,_theme(colors.indigo.500)_94%,_theme(colors.slate.600/.48))_border-box]",
        className
      )}>
      {children}
    </div>
  );
}

examples/motion/components/animated-gradient-border/01/page.tsx

import GradientBorder from "./gradient-border";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function GradientBorderCardExample() {
  return (
    <GradientBorder>
      <Card className="w-[300px]">
        <CardHeader>
          <CardTitle>Login to your account</CardTitle>
        </CardHeader>
        <CardContent>
          <form>
            <div className="flex flex-col gap-6">
              <div className="grid gap-2">
                <Label htmlFor="email">Email</Label>
                <Input id="email" type="email" placeholder="m@example.com" required />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="password">Password</Label>
                <Input id="password" type="password" required />
              </div>
            </div>
          </form>
        </CardContent>
        <CardFooter className="flex-col gap-2">
          <Button type="submit" className="w-full">
            Login
          </Button>
        </CardFooter>
      </Card>
    </GradientBorder>
  );
}

Componentes parecidos