# Neumorph Eyebrow

> Neumorphic eyebrow label for React and shadcn/ui, an inset pill with color intents for tagging sections above headings.

Source: https://www.cult-ui.com/docs/components/neumorph-eyebrow

## Example

```tsx title="neumorph-eyebrow-demo.tsx"
import { NeumorphEyebrow } from "../ui/neumorph-eyebrow"

export default function NeumorphEyebrowDemo() {
  return (
    <div className="flex w-full flex-col items-center justify-center space-y-4">
      <NeumorphEyebrow>A milestone in scraping</NeumorphEyebrow>
      <NeumorphEyebrow intent="primary">Primary variant</NeumorphEyebrow>
      <NeumorphEyebrow intent="secondary">Secondary variant</NeumorphEyebrow>
    </div>
  )
}
```

Neumorph Eyebrow is a small React label component for shadcn/ui. Use it above section headings on landing pages to tag a feature, release, or category.

## References

<Citations>
  <CitationTitle>Inspiration</CitationTitle>
  <CitationList>
    <CitationItem>
      <CitationLink
        href="https://animations.dev/learn"
        target="_blank"
        rel="noopener noreferrer"
      >
        Animations dot dev
      </CitationLink>
    </CitationItem>
  </CitationList>
</Citations>

## Installation

### CLI

```bash
npx shadcn@latest add @cult-ui/neumorph-eyebrow
```

### Manual

**Copy and paste the following code into your project.**

```tsx title="neumorph-eyebrow.tsx"
import type React from "react"
import { cva, type VariantProps } from "class-variance-authority"

const neumorphEyebrowVariants = cva(
  "mb-2 flex h-6 w-fit items-center rounded-full border-[.75px] px-2.5 text-xs font-medium 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] bg-[#FBFAF9] text-[#36322F]",
        primary: "border-blue-200 bg-blue-50 text-blue-800",
        secondary: "border-green-200 bg-green-50 text-green-800",
      },
    },
    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
```

**Update the import paths to match your project setup.**

## Usage

```tsx
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

```tsx
<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

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

### Common Use Cases

```tsx
<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>
```