Library

Style Utils

Tailwind utility functions including cn() class merger and theme color constants

Preview

import { cn, THEME_COLORS } from "~/styles/utils";

// Merge classes conditionally
const className = cn("px-4 py-2", {
  "bg-primary": isPrimary,
  "bg-secondary": !isPrimary,
});

// Access theme colors
const bgColor = THEME_COLORS.primary;

Props

The Style Utils library exports the following functions and constants:

Prop

Type

Installation

npx shadcn@latest add @uifoundry/style-utils

If you encounter issues, check the registry setup guide for configuration help.

Registry Dependencies

This component has no registry dependencies - it's a foundational utility.

Dependencies

This component requires the following NPM packages:

  • clsx - Utility for constructing className strings conditionally
  • tailwind-merge - Merge Tailwind CSS classes without style conflicts

Field Types

TypeScript definitions for PayloadCMS field types

Animated Group

Motion primitive for animating groups of elements with staggered effects

On this page

PreviewPropsInstallationRegistry DependenciesDependencies