Figma Ruler

A design-tool ruler with every section as a frame.

npm install motion @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Installation

npm install motion @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Then copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.

Prop	Type	Default	Description
logo	ReactNode	-	Your logo. It inherits currentColor.
items	NavItem[]	-	One link per section, in page order: label and #id href.
cta	{ label: string; href: string }	-	Optional call-to-action button.
className	string	-	Extra classes for the outer element.