# Semantics

By default, components generated by the library (`Box`, `Composition`, and area components) render a `<div>` element, which may not be a valid HTML element in some use cases.

You can provide a custom HTML element or a React component to render instead of the default one by using [polymorphic prop](https://www.styled-components.com/docs/api#as-polymorphic-prop) `styled-components` feature.

{% hint style="info" %}
See [Polymorphic prop API](https://www.styled-components.com/docs/api#as-polymorphic-prop) in styled components' documentation.
{% endhint %}

## Using HTML element

To render a different HTML element provide its name as a value of the `as` prop of any component exported or generated by the library:

```jsx
import React from 'react'
import { Box } from 'atomic-layout'

export const Header = (props) => (
  <Box as="header" {...props} />
)
```

## Using React component

To render a custom React component provide its reference as a value to the `as` prop.

{% hint style="warning" %}
You must spread the props in your custom component to propagate class names generated by `styled-components`.
{% endhint %}

```jsx
import React from 'react'
import { Box } from 'atomic-layout'
import styled from 'styled-components'

const Header = (props) => (
  // Spreading the props assigns "className" (SC)
  // and the props from Atomic Layout.
  <div {...props} />
)

export const MyComponent = () => (
  <Box as={Header} height={50} padding={10} />
)
```

## Custom areas components

Polymorphic prop can be used on the area components generated by `Composition`.

```jsx
import React from 'react'
import { Composition } from 'atomic-layout'
import { Footer as CustomFooter } from '@components'

export const PageContent = () => (
  <Composition as="main" areas="header footer">
    {(Areas) => (
      <>
        <Areas.Header as="header">{...}</Areas.Header>
        <Areas.Footer as={CustomFooter}>{...}</Areas.Footer>
      </>
    )}
  </Composition>
)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://redd.gitbook.io/atomic-layout/recipes/semantics.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.