Utilities

cn()

Joins class names and merges Tailwind classes, so the last conflicting class wins. It knows the GlobUI radius and shadow scales.

Server componentNo state or handlers. Safe to render in a Server Component.

import { cn } from "@glob-ui/utils"

Preview

cn("rounded-glob-md p-2 text-sm", "rounded-full p-4") → "text-sm rounded-full p-4"

Usage

import { cn } from "@glob-ui/utils"

cn("rounded-glob-md p-2", isActive && "bg-glob-surface-hover", className)

Falsy values are ignored. Without the GlobUI scales, rounded-glob-md and rounded-full would both survive; with them, the later one wins.

Slot

Renders its single child with the props, className, handlers and ref merged in. It is how `asChild` works.

On this page