> For the complete documentation index, see [llms.txt](https://creatorlabs.gitbook.io/boltui-docs-preview/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://creatorlabs.gitbook.io/boltui-docs-preview/understanding-bolt/components.md).

# Components

Components of BoltUI

BoltUI uses native HTML Components which are directly converted to HTML Elements when described. That means every HTML Component is valid in Bolt too! But how will we translate HTML to our components?

Let's see an example below:

```html
<p>Hello World</p>
```

Now this is a HTML component, and how would we describe it in Bolt? Well here it is

```javascript
p("Hello World")
```

As you can see, a HTML component is just a function in bolt, that means every html component will have it's own function, like

```javascript
p("I am a pragraph")
h1("I am a large heading")
h2("I am smaller than large heading")
div("I am a container")
section("I am a section")
```

But in HTML, you can nest components, like

```html
<div>
    <p>Name: Bolt</p>
    <p>Work: Javascript Framework</p>
</div>
```

So how we can do it in Bolt? Well all the function you just saw as components also accept multiple components as their child elements, i.e

```javascript
div(
    p("Name: Bolt"),
    p("Work: Javascript Framework")
)
```

{% hint style="info" %}
Note: the html tag <mark style="color:green;">`<var>`</mark> clashes with the keyword <mark style="color:purple;">`var`</mark> in javascipt, hence if you want to use the <mark style="color:green;">`<var>`</mark> tag, call the <mark style="color:purple;">`variable`</mark>`()` function instead
{% endhint %}

It's that simple! You can now create layouts entierely on this architecture, and the intellisense that your IDE will provide, it will be even faster and you will have amazing developer experience!