## Components Package [#components-package]

Use the namespace that matches the category you are importing from:

| Namespace                | Import Path                                          | Purpose                                                |
| ------------------------ | ---------------------------------------------------- | ------------------------------------------------------ |
| Client convenience entry | `@tilt-legal/cubitt-components`                      | Client-first entrypoint for common consumption         |
| Server-safe subset       | `@tilt-legal/cubitt-components/server`               | Import here in server-only contexts when needed        |
| Primitives               | `@tilt-legal/cubitt-components/primitives`           | Primitive components                                   |
| Composites               | `@tilt-legal/cubitt-components/composites`           | Composite components and related types/helpers         |
| Utilities                | `@tilt-legal/cubitt-components/utilities`            | Shared utility functions                               |
| Utilities hooks          | `@tilt-legal/cubitt-components/utilities/hooks`      | First-party hooks (including `usehooks-ts` re-exports) |
| Utilities formatters     | `@tilt-legal/cubitt-components/utilities/formatters` | Formatting helpers                                     |

Example:

```tsx
import { Button, Input } from "@tilt-legal/cubitt-components/primitives";
import { DataTable } from "@tilt-legal/cubitt-components/composites";
import { cn } from "@tilt-legal/cubitt-components/utilities";
import { useDarkMode } from "@tilt-legal/cubitt-components/utilities/hooks";
import { formatBytes } from "@tilt-legal/cubitt-components/utilities/formatters";
```

## Icons Package [#icons-package]

Prefer category imports:

| Namespace                | Import Path                             |
| ------------------------ | --------------------------------------- |
| Root compatibility entry | `@tilt-legal/cubitt-icons`              |
| Shared icon types        | `@tilt-legal/cubitt-icons/types`        |
| UI outline               | `@tilt-legal/cubitt-icons/ui/outline`   |
| UI fill                  | `@tilt-legal/cubitt-icons/ui/fill`      |
| Brands mono              | `@tilt-legal/cubitt-icons/brands/mono`  |
| Brands color             | `@tilt-legal/cubitt-icons/brands/color` |
| MIME                     | `@tilt-legal/cubitt-icons/mime`         |
| Display                  | `@tilt-legal/cubitt-icons/display`      |
| Tools                    | `@tilt-legal/cubitt-icons/tools`        |

```tsx
import { Check, Xmark } from "@tilt-legal/cubitt-icons/ui/outline";
import { Heart } from "@tilt-legal/cubitt-icons/ui/fill";
import type { CubittIconProps } from "@tilt-legal/cubitt-icons/types";
```

<Callout type="info">
  Namespace imports are the canonical icon API. Deep per-icon imports such as
  `@tilt-legal/cubitt-icons/ui/outline/accessibility` are not public. See
  [Icons](/foundations/icons) for usage guidance, props, and registries.
</Callout>

## Logos Package [#logos-package]

Use the root package export:

```tsx
import { MobiusLogo, TiltLogo } from "@tilt-legal/cubitt-logos";
```

<Callout type="info">
  See [Logos](/foundations/logos) for variants, sizing, and component props.
</Callout>