Neumorph Eyebrow

Docs

Neumorph Eyebrow

A neumorphic eyebrow text component with subtle animation effects.

A milestone in scraping

Primary variant

Secondary variant

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

References

Inspiration

Animations dot dev

Installation

npx shadcn@latest add https://cult-ui.com/r/neumorph-eyebrow.json

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 Card Texture Card