Typography

Neumorph Eyebrow

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

Updated Oct 1, 2026

A milestone in scraping

Primary variant

Secondary variant

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

Inspiration

Animations dot dev
animations.dev(opens in a new tab)

Installation


pnpm dlx shadcn@latest add @cult-ui/neumorph-eyebrow

Usage


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>