# components

This is the main libs of the crema inbuild universal components of the theme. You can reuse all the components in your app. You check the components library folder structure below.

<figure><img src="/files/UiuaVdsNmgdyKYGZZyVC" alt=""><figcaption></figcaption></figure>

In the components library, there are some SVG images in the assets folder, these SVG change their color according to the theme's primary color.\
\
In this library, the main folder is the lib folder. In this lib folder, we have all the primary components of the theme. By using these components you can set your app's layout, theme color and style, sidebar menu style, and a lot more things. You can check all the components of this library in the below screenshot.

<figure><img src="/files/DigcmJS1FXtenkAkGBZJ" alt=""><figcaption></figcaption></figure>

You can use the components library like the below-shown code. AppsContainer belongs to the components library. That we are using here in the code by importing it from the library\
&#x20;<mark style="background-color:blue;">import AppsContainer from '@crema/components/AppsContainer';</mark> \
We can use all components from the components library like this.

```javascript
import React, { useState } from 'react';
import { useIntl } from 'react-intl';
import { ChatSideBar, ChatContent} from '@crema/modules/apps/Chat';
import { useGetDataApi } from '@crema/utility/APIHooks';
import AppsContainer from '@crema/components/AppsContainer'; 

const Chat = () => {
  const [selectedUser, setSelectedUser] = useState(null);

  const [{ apiData: connectionList, loading }, { setData: setConnectionData }] =
    useGetDataApi('/api/chatApp/connections', []);

  const { messages } = useIntl();
  return (
    <AppsContainer
      title={messages['chatApp.chat'].toString()}
      sidebarContent={
        <ChatSideBar
          selectedUser={selectedUser}
          setSelectedUser={setSelectedUser}
          connectionList={connectionList}
          loading={loading}
        />
      }
    >
      <ChatContent
        selectedUser={selectedUser}
        setSelectedUser={setSelectedUser}
        setConnectionData={setConnectionData}
      />
    </AppsContainer>
  );
};

export default Chat;
```


---

# 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://docs.cremawork.com/v-4/overview/folder-structure/libs/components.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.