<page url="/en/docs/react/getting-started/performance">
# Performance

**Category**: react
**URL**: https://ui.darkcode.dev/en/docs/react/getting-started/performance
**Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/react/getting-started/(handbook)/performance.mdx
> Ship the smallest possible JavaScript and CSS with DarkCode UI


***

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:

```tsx
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:

```tsx
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:

```ts title="next.config.ts"
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:

```css
@import 'tailwindcss';
@import '@darkcode-ui/styles'; /* every component's styles (~45&nbsp;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:

```css
@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';

```

<Callout type="info">
  A Button-only app ships roughly **6&nbsp;KB gzip** of CSS this way, versus
  ~45&nbsp;KB for the all-in-one import — an ~87% reduction. The trade-off is that
  you must add an import for each new component you use.
</Callout>

<Callout type="warning">
  Import order matters. Always import `tailwindcss` first, then the DarkCode UI
  foundation, then component stylesheets.
</Callout>

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:

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

```

## The accessibility floor

Every DarkCode UI component is built on [React Aria](https://react-spectrum.adobe.com/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.
</page>