Docs
Neumorph Eyebrow

Neumorph Eyebrow

A neumorphic eyebrow text component with subtle animation effects.

A milestone in scraping
Primary variant
Secondary variant

References

Inspiration

Installation

Copy and paste the following code into your project.

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 NeumorphEyebrow

Update the import paths to match your project setup.

Usage

import { NeumorphEyebrow } from "@/components/ui/neumorph-eyebrow"
export default function Example() {
  return <NeumorphEyebrow>Featured Content</NeumorphEyebrow>
}

Features

  • Three variants: default, primary, and secondary
  • Neumorphic design with subtle shadow effects
  • Rounded pill shape
  • Compact and lightweight

Examples

All Variants

<div className="space-y-4">
  <NeumorphEyebrow>Default Eyebrow</NeumorphEyebrow>
  <NeumorphEyebrow intent="primary">Primary Eyebrow</NeumorphEyebrow>
  <NeumorphEyebrow intent="secondary">Secondary Eyebrow</NeumorphEyebrow>
</div>

With Custom Styling

<NeumorphEyebrow className="font-bold">Custom Styled Eyebrow</NeumorphEyebrow>

Common Use Cases

<div className="space-y-4">
  <div>
    <NeumorphEyebrow>NEW</NeumorphEyebrow>
    <h2>Feature Announcement</h2>
  </div>
 
  <div>
    <NeumorphEyebrow intent="primary">BETA</NeumorphEyebrow>
    <h2>Upcoming Feature</h2>
  </div>
 
  <div>
    <NeumorphEyebrow intent="secondary">UPDATED</NeumorphEyebrow>
    <h2>Recent Changes</h2>
  </div>
</div>
Minimal CardTexture Card