Use Onycx UI

Requirements

• Start with a React 19 project that supports TypeScript.
• Set up Tailwind CSS v4 so it picks up classes in your component files.
• Check the component’s installation section for extra packages such as GSAP, Motion, or Lenis.

Install a component

Copy a customized component

1. Open a component and use Customize to try your settings in the preview.
2. Install any packages listed under Installation.
3. In Code, open the component’s TSX tab and copy it into your project. The file includes your settings as prop defaults.
4. Open Usage for an import and JSX example. Adjust the import to match where you saved the file.

1import { PillIconButton } from "@/components/onycx/pill-icon-button";2​3export default function Example() {4  return <PillIconButton label="Explore the catalog" href="/catalog" />;5}

Install with shadcn

If your project already uses shadcn, run the command from the component’s installation section to add its default source. Here’s the command for Pill Icon Button.

Find the full list of installable components in /r/registry.json.

Fonts

Components inherit your page font. To match the previews, the optional Next.js example below loads Inter for body text and Bodoni Moda for serif accents.

1@import "tailwindcss";2​3:root {4  /* Onycx components read these with safe fallbacks. */5  /* Italic accent words. Swap in any serif you like, e.g. Playfair Display or Fraunces. */6  --font-serif-accent: var(--font-bodoni), "Bodoni Moda", Didot, Georgia, serif;7}8body { font-family: var(--font-inter), system-ui, sans-serif; }

1import { Inter, Bodoni_Moda } from "next/font/google";2import "./globals.css";3​4const sans = Inter({ subsets: ["latin"], variable: "--font-inter" });5const accent = Bodoni_Moda({ subsets: ["latin"], style: ["normal", "italic"], variable: "--font-bodoni" });6​7export default function RootLayout({ children }: { children: React.ReactNode }) {8  return (9    <html lang="en" className={`${sans.variable} ${accent.variable}`}>10      <body>{children}</body>11    </html>12  );13}

Smooth scroll

Scroll scenes use GSAP ScrollTrigger and work with native scrolling. If you want inertial wheel scrolling, mount Smooth Scroll once in your layout. It feeds Lenis into the GSAP ticker so every scene reads one clock, keeps native momentum on touch devices and stops entirely for reduced-motion visitors. Never mount two smooth-scroll engines.

Reduced motion

Many animated components check prefers-reduced-motion. Pinned scenes switch to stacked or click-through layouts, scrubs and parallax stop, loaders are skipped and marquees sit still. The catalog and docs are readable without JavaScript. Interactive previews need JavaScript. Pair this with the Motion Toggle to give visitors an on-page switch.

Testing different screen sizes

Type uses clamp(), grids use minmax(0, 1fr), and components that live in unknown widths measure their own container. Pinned and sticky scenes only engage above a minimum width and height, so short laptop screens and phones get a layout that scrolls normally. Use the workbench's desktop, tablet and phone frames to check your tweaks.

Accessibility

Buttons act and links navigate. Toggles use aria-pressed, tab sets support arrow keys, dialogs trap and return focus, carousels announce their position through live regions, and inactive scenes are inert. Aim for touch targets of at least 44px in the finished interface. Automated checks are a first pass; test with a keyboard and a screen reader in your own content.

Add to the catalog

If you’re working on the catalog itself, create a folder for the component in src/registry/items/. Add the component file, demo.tsx for its preview, and meta.ts for its description and controls. Run npm run check to rebuild the index and verify the export.

Images and licenses

Copied files use embedded sample illustrations. Supply your own media URLs for production, including a video source if you use Framed Video Hero. The component source is MIT licensed.