UI Components & JSX Patterns

UI Components & JSX Patterns

Component Library

Check your component library before building custom UI. Common components to look for:

JSX Patterns

Class Names — Use cn for Tailwind Merging

Without cn, conflicting Tailwind classes produce unpredictable results. Use cn (from clsx + tailwind-merge) to resolve conflicts deterministically:

import { cn } from '@/lib/utils'; // or wherever your cn utility lives

// Merges Tailwind classes correctly, resolves conflicts
<div className={cn('base-class', { 'text-lg': isLarge }, className)} />

Conditional Rendering

// Ternary for simple cases
{isLoading ? <Spinner /> : <Content />}

// Early return for complex cases
if (!data) return <EmptyState />;
return <DataView data={data} />;

Toasts

import { toast } from 'sonner'; // or your toast library

toast.promise(myAction(data), {
  loading: 'Creating...',
  success: 'Created!',
  error: 'Failed to create',
});

Tailwind Styling

Use theme classes instead of fixed colors for dark mode compatibility:

Testing Attributes

Add data-test to interactive elements:

<button data-test="submit-button">Submit</button>
<form data-test="signup-form">{/* ... */}</form>