Components

The Components page shows every piece grouped into categories such as Navbars, Buttons, Forms or Backgrounds. The categories are also in the Components menu at the top; just hover it.

Each card is the real component, not a picture. You can hover it, click it or type into it. The Free or Pro label tells you which plan it belongs to.

Click a card to open its page. It has four parts:

1. 1

   Preview

   A large demo. Top left are variants: one click switches to a faster, bigger or quieter version. Top right is Replay.

2. 2

   Props

   Texts, speed, size and other options. Every change shows up in the preview straight away.

3. 3

   Appearance

   Accent colour, corner radius and preview background. It applies to this component only and is remembered.

4. 4

   Code

   Ready code with your settings and the install command. Just copy it.

Add a component by the last part of its page address. The magnetic button lives at /components/magnetic, so:

$npx nex-ui add magnetic

Then use it like any other component:

import { MagneticButton } from "@/components/nex-ui/magnetic";

export function Hero() {
  return <MagneticButton strength={0.4}>Get started</MagneticButton>;
}

Everything you set in the playground is also a prop in the code. And the file is yours, so you can change anything else in it. Library updates never overwrite your copy.

Components take their colours and corner radii from variables in your Tailwind theme. Change them in one place and every component follows.

@theme {
  --color-ink: #130709;      /* background */
  --color-ink-2: #1e0b0e;    /* surfaces and cards */
  --color-line: #3a1a1e;     /* lines */
  --color-bone: #f4e9e6;     /* text */
  --color-ash: #a08a8c;      /* muted text */
  --color-signal: #ff3347;   /* accent */
  --color-blood: #b3122a;    /* deeper accent */
}

Animated components respect the system's Reduce motion setting. To apply it across your app, wrap it in MotionConfig:

import { MotionConfig } from "motion/react";

export function Providers({ children }) {
  return <MotionConfig reducedMotion="user">{children}</MotionConfig>;
}

Interactive components work with the keyboard and carry labels for screen readers. Keep the labels when you change texts.