> For the complete documentation index, see [llms.txt](https://fe-qasir.gitbook.io/qiblat-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fe-qasir.gitbook.io/qiblat-documentation/features/components/common.md).

# Common

## How to use

If you are going to create a global component that applies only to the project then you can use this method. 

### Step 1: Set up component

The first step you have to create a component folder in `./src/components/common`. With the file structure as below. 

<div align="left"><img src="/files/-MWbcxZBrerDIs0qIsXT" alt=""></div>

### Step 2: Component code

**index.js** used to place the root function component in which there are props and rendering elements. Here we use override button component with [Qasir UI](https://qasir-ui.qasir.xyz/) or [Material UI](https://v4.mui.com/). You can also **create pure components** that you want without overriding other component design systems.&#x20;

```jsx
// Vendors
import React from 'react';

// Qasir UI
import Button from 'qasir-ui/inputs/Button';

// Styles
import ButtonStyled from './style';

const Button = () => {
  const classes = ButtonStyled();
  return <Button className={classes.root}>Hello World</Button>;
};

export default Button;
```

### Step 3: Component style

**style.js** used to style the component. Here we use one of the function styles from [Material UI](https://material-ui.com/), namely `makeStyles`.&#x20;

```jsx
import { makeStyles } from '@material-ui/core/styles';

const ButtonStyled = makeStyles(() => ({
  root: {
    backgroundColor: 'blue',
    width: '100%',
    borderRadius: 10,
  },
}));

export default ButtonStyled;
```

### Step 4: Import component

We use aliases for component usage, code as shown below. You can check aliases configs in `jsconfig.json`

```jsx
import Button from '@/common/Button';
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://fe-qasir.gitbook.io/qiblat-documentation/features/components/common.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.