Performance

DarkCode UI is built for tree-shaking — you only pay for the components you import. This guide covers the three levers that keep your bundle small and your dev server fast.

Import only the components you use

Importing from the package root works and tree-shakes in production bundlers:

import { Button } from '@darkcode-ui/react';

For bundlers with weaker tree-shaking, or to speed up dev cold-starts, import the component directly from its subpath. Each component ships as its own entry point:

import { Button } from '@darkcode-ui/react/button';
import { Accordion } from '@darkcode-ui/react/accordion';

Both forms produce the same runtime — the subpath form just guarantees nothing else is pulled into the module graph while resolving.

Speed up Next.js with optimizePackageImports

The biggest dev cold-start win for Next.js is optimizePackageImports. It rewrites root imports (@darkcode-ui/react) into per-component imports automatically, so you keep the ergonomic import while getting subpath performance:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: {
    optimizePackageImports: ['@darkcode-ui/react'],
  },
};

export default nextConfig;

This avoids resolving all components on every change and improves both dev startup and production tree-shaking.

Ship only the CSS you use

By default you import the complete stylesheet — the simplest setup, and the right choice for most apps:

@import 'tailwindcss';
@import '@darkcode-ui/styles'; /* every component's styles (~45 KB gzip) */

If you only use a handful of components and want the smallest possible CSS, import the foundation once, then add each component's stylesheet on demand:

@import 'tailwindcss';
@import '@darkcode-ui/styles/core'; /* base, theme tokens, utilities (~5 KB gzip) */

/* Then only the components you actually render */
@import '@darkcode-ui/styles/components/button.css';
@import '@darkcode-ui/styles/components/input.css';

If you build custom themes that override component styles in the theme layer, wrap each component import in the components layer to preserve the cascade:

@import '@darkcode-ui/styles/components/button.css' layer(components);

The accessibility floor

Every DarkCode UI component is built on React Aria, which provides the shared accessibility runtime. This runtime is loaded once and shared across every component you use, so adding more components grows your bundle slowly. It's the foundation that makes the components keyboard-navigable, screen-reader friendly, and internationalized out of the box.