# @gauntlet/components (/docs/reference/packages/components)



`@gauntlet/components` is the shared component library, organized by atomic design and addressed by **subpath imports**; the root barrel deliberately exports only a handful of top-level components.

```ts
import { ProductCard } from '@gauntlet/components/molecules/product-card/product-card'
import { useBlockSettings, useBlockStyle } from '@gauntlet/components/style-utils'
```

<Callout type="info" title="Prefer ui-builder for new blocks">
  For new block UIs, compose [@gauntlet/ui-builder](/docs/reference/packages/ui-builder) elements
  instead of reaching into this library. Components here are for reuse of existing product
  surfaces and for maintaining older blocks.
</Callout>

`./style-utils` is the subpath you will use most: it re-exports `useBlockSettings`, `useBlockStyle`, and `useVisibility`, the settings/style/visibility trio every block needs.

## Import surface [#import-surface]

{/* generated:begin components-exports */}

The package exposes 409 subpath imports, grouped by atomic-design layer:

| Import root                          | Modules |
| ------------------------------------ | ------- |
| `@gauntlet/components/atoms/*`       | 17      |
| `@gauntlet/components/blocks/*`      | 9       |
| `@gauntlet/components/hocs/*`        | 1       |
| `@gauntlet/components/index/*`       | 1       |
| `@gauntlet/components/molecules/*`   | 252     |
| `@gauntlet/components/organisms/*`   | 126     |
| `@gauntlet/components/registry/*`    | 1       |
| `@gauntlet/components/style-utils/*` | 1       |
| `@gauntlet/components/utils/*`       | 1       |

{/* generated:end */}