purrfect uiComponents

Notch

A tab that hangs from the top edge with curved shoulders, dropping in once on mount.

Behaviour

  • Hangs from the top edge of the nearest relative container; the shoulders curve into that edge.
  • Drops in 26px and fades up once on mount.
  • The tab is at most 200px wide on phones and 500px from md up.
  • Reduced motion: it fades in without moving.

Props

PropTypeDescription
childrenReactNodeWhat sits in the tab: a logo, a wordmark, a nav.
colorstringdefault "#fff"Fill of the tab and of its two shoulders. Any CSS colour.
radiusnumberdefault 32Radius of the lower corners and size of the shoulders, in px.
delaynumberdefault 1.05Seconds before the tab drops in.
offsetnumberdefault 0Gap in px between the container's top edge and the tab.
classNamestringClasses for the positioning wrapper (absolute, full width).

Installation

npx shadcn@latest add https://purrfectui.com/r/notch.json

How to use

import { Notch } from "@/components/ui/notch";

<div className="relative h-64 overflow-hidden rounded-3xl">
  <Notch>
    <span className="text-2xl font-medium">ARMOUR</span>
  </Notch>
</div>

Source code

Loading…

Credits

Ported from armour.vaibhavtomar.com.

License

MIT. Copy it into your project and change it as you like.

0