# @gauntlet/ui-builder (/docs/reference/packages/ui-builder)



`@gauntlet/ui-builder` is the element vocabulary blocks are composed from: atoms (`Box`, `Text`, `Image`, `Button`, …), helper elements (`Faq`, `MediaList`, `Cta`, …), layout elements, and the `Content` renderer that turns layout config into UI.

**Start with the [UI elements catalog](/docs/build/atoms-catalog)**, which walks every element with usage guidance.

```ts
import { Box, TextElement, Media, Content, getLayoutItem } from '@gauntlet/ui-builder'
```

## Exports [#exports]

{/* generated:begin ui-builder-exports */}

**function** (11):

`deepMerge` · `getAspectRatio` · `getBorderRadiusValue` · `getCompressedShopifyImageURL` · `getContentWidth` · `getHeaders` · `getHorizontalSpacingStyle` · `getWidthForShopifyImageURL` · `hapticFeedback` · `resolveRichTextTagsStyle` · `transformImageUrl`

**type** (14):

`BackgroundImageData` · `BaseComponent` · `BaseComponentIds` · `BaseComponentsMapType` · `BaseElementProps` · `BaseLayoutElementProps` · `ComponentId` · `ComponentsMap` · `HorizontalPosition` · `ImageQuality` · `Layout` · `LayoutItem` · `RootLayoutItem` · `VerticalPosition`

{/* generated:end */}