Code components - Using packages

Importing packages

Although a number of useful built-in and bundled packages are provided, you can also import any npm package through the web.

import { motion } from 'https://esm.sh/motion/react?external=react,react-dom';

esm.sh unwraps all dependencies of the package you import as additional import statements. When importing packages that would normally import e.g. react or react-dom themselves, esm.sh can skip returning import statements for those packages by appending the URL with ?external. This is important to avoid running multiple versions of React.

Built-in custom packages

FormattedText

Source Code

A built-in component to render text with trusted HTML using dangerouslySetInnerHTML.

The content is safe when processed through Drupal’s filter system that is correctly configured.

import FormattedText from '@/lib/FormattedText';

export default function Example() {
  return (
    <FormattedText>
      <em>Hello, world!</em>
    </FormattedText>
  );
}

cn

Source Code

Utility for combining Tailwind CSS classes.

import { cn } from '@/lib/utils';

export default function Example() {
  return <ControlDots className="top-4 left-4 stroke-white absolute" />;
}

const ControlDots = ({ className }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 31 9"
    fill="none"
    strokeWidth="2"
    className={cn('w-12', className)}
  >
    <ellipse cx="4.13" cy="4.97" rx="3.13" ry="2.97" />
    <ellipse cx="15.16" cy="4.97" rx="3.13" ry="2.97" />
    <ellipse cx="26.19" cy="4.97" rx="3.13" ry="2.97" />
  </svg>
);

drupal-utils

See data fetching

jsonapi-utils

See data fetching

Bundled npm packages

Tailwind

tailwindcss.com

Tailwind 4 is available to all components by default. The global CSS is added to all pages with a @theme directive.

Do not include @import "tailwindcss" as it is included automatically.

clsx

GitHub Project Page

A tiny utility for constructing className strings conditionally. Also serves as a faster & smaller drop-in replacement for the classnames module.

import { clsx } from 'clsx'

export default function Example() {
  return (
    <div className={clsx('foo', true && 'bar', 'baz');} />
    // => 'foo bar baz'
  );
};

class-variance-authority

GitHub Project Page

CVA helps you define components with multiple visual variants (like size, color, state) in a clean, type-safe way. Instead of manually concatenating CSS classes or writing complex conditional logic, you define variants upfront and let CVA handle the class composition.

import { cva } from 'class-variance-authority';

const button = cva(
  'font-semibold border rounded', // base classes
  {
    variants: {
      intent: {
        primary: 'bg-blue-500 text-white border-blue-500',
        secondary: 'bg-gray-200 text-gray-900 border-gray-200',
      },
      size: {
        small: 'text-sm py-1 px-2',
        medium: 'text-base py-2 px-4',
      },
    },
    defaultVariants: {
      intent: 'primary',
      size: 'medium',
    },
  },
);

// Usage
button({ intent: 'secondary', size: 'small' });
// Returns: "font-semibold border rounded bg-gray-200 text-gray-900 border-gray-200 text-sm py-1 px-2"

@drupal-api-client/json-api-client and drupal-jsonapi-params

See data fetching

swr

See data fetching

tailwind-merge

GitHub Project Page

A utility function to efficiently merge Tailwind CSS classes in JS without style conflicts.

import { twMerge } from 'tailwind-merge';

twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]');
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'