Inverted Radius Component
A tab component with smooth inverted corners, drawn with inline SVG so it stays crisp at any zoom.
Inverted corners, where a tab curves outward into the panel below it, are usually faked with pseudo-elements and break at odd zoom levels. This component draws the whole shape as one inline SVG path instead, so the curve stays pixel-perfect at any size.
It is styled entirely with Tailwind utility classes and drops into any Next.js or React project. Change the colours to match your theme and adjust the path if you change the size.
What it does
- One inline SVG path instead of pseudo-elements
- Pixel-perfect at every zoom level
- Styled with plain Tailwind classes
- Drops into Next.js and React projects
Built with
- Next.js
- React
- TypeScript
- Tailwind CSS
- SVG