Todos os componentes

Neumorphic Eyebrow

Neumorphic Eyebrow é um componente de texto para React e Tailwind CSS, da biblioteca Cult UI, com licença MIT. Copia e cola no teu projeto.

Cult UI MIT text

O que é

Neumorphic Eyebrow é um componente de texto para React e Tailwind CSS, da biblioteca Cult 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.

Precisa de

npm i class-variance-authority

Licença

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

Neumorphic Eyebrow

apps/www/registry/default/ui/neumorph-eyebrow.tsx

import type React from "react"
import { cva, type VariantProps } from "class-variance-authority"

const neumorphEyebrowVariants = cva(
  "rounded-full border-[.75px] px-2.5 w-fit h-6 flex items-center text-xs font-medium mb-2 shadow-[inset_0px_-2.10843px_0px_0px_rgb(244,241,238),_0px_1.20482px_6.3253px_0px_rgb(244,241,238)]",
  {
    variants: {
      intent: {
        default: "border-[#E9E3DD] text-[#36322F] bg-[#FBFAF9]",
        primary: "border-blue-200 text-blue-800 bg-blue-50",
        secondary: "border-green-200 text-green-800 bg-green-50",
      },
    },
    defaultVariants: {
      intent: "default",
    },
  }
)

interface NeumorphEyebrowProps
  extends VariantProps<typeof neumorphEyebrowVariants> {
  children: React.ReactNode
  className?: string
}

export const NeumorphEyebrow: React.FC<NeumorphEyebrowProps> = ({
  children,
  intent,
  className,
  ...props
}) => {
  return (
    <div className={neumorphEyebrowVariants({ intent, className })} {...props}>
      {children}
    </div>
  )
}

export default NeumorphEyebrow

Componentes parecidos