## Components Package [#components-package]

Use the narrowest package subpath that matches what you are importing:

| Namespace            | Import Path                                          | Purpose                                                |
| -------------------- | ---------------------------------------------------- | ------------------------------------------------------ |
| Component subpaths   | `@tilt-legal/cubitt-components/button`               | One public subpath per component or UI surface         |
| 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 } from "@tilt-legal/cubitt-components/button";
import { Input } from "@tilt-legal/cubitt-components/input";
import { DataTable } from "@tilt-legal/cubitt-components/data-table";
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 grouped logo namespaces:

| Namespace      | Import Path                         | Purpose                                                 |
| -------------- | ----------------------------------- | ------------------------------------------------------- |
| Internal logos | `@tilt-legal/cubitt-logos/internal` | Cubitt-owned brand logos such as Mobius, Tilt, and Docs |
| Partner logos  | `@tilt-legal/cubitt-logos/partners` | Partner/customer logo components                        |

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

The logos package does not expose a root component namespace.

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