# Overview

{% hint style="info" %}
🎥 Watch ["Components" style guide video here.](https://youtu.be/5kctgs6mRgU)
{% endhint %}

{% hint style="info" %}
🎥 Watch [a run through of creating a component](https://youtu.be/Vx3A1ws9On4), which covers most of the component-related information from the style guide, as well as efficiency tips (e.g. keyboard shortcuts, [snippets](broken://pages/OMogOJ9RZmeH6HOcNJBQ), ["format on save"](broken://pages/E5kJqYdbb0MEwCxSCmfy), etc.)
{% endhint %}

***

{% hint style="info" %}
See related Basic Guidelines sections: [functional components](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/basic-guidelines/react#:~:text=Always%20use%20React-,functional%20components,-\(vs%20class%20components), [named export](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/basic-guidelines/react#:~:text=Use%20named%20exports%20for%20components%20and%20other%20functions/variables/etc), [one exported component per file](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/basic-guidelines/react#:~:text=Only%20include-,one%20exported%20component%20per%20file,-.),  [component files vs component folders](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/basic-guidelines/react#:~:text=Every%20component%20should%20exist%20within%20a%20%22component%20file%22%20of%20the%20same%20name%20%26%20casing.), [multiple early returns](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/basic-guidelines/react#:~:text=conditional%20rendering%2C%20prefer-,multiple%20returns,-\(early%20returns\)), [event handler syntax](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/basic-guidelines/react#:~:text=For-,event%20handlers,-%3A), 
{% endhint %}

{% hint style="info" %}
See related Naming sections: [filename](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/naming/filenames#components)[ (and component locations)](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/basic-guidelines/react#:~:text=Always%20use%20React-,functional%20components,-\(vs%20class%20components), [declarations](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/naming/declarations)
{% endhint %}

***

### G**eneral**

* **Simple components:**
  * 📄 Component file
* **Complex components:**
  * 📁 Component folder *(see* [*related Naming section*](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/naming/folders-directories#component-folder)*)*
    * 📁 \_components  *(optional)*
    * 📁 \_lib  *(optional)*
    * 📄 Component file
    * 📄 index.ts

***

### Reusable Components

* **Storybookized**
  * Location: `~/components/_storybook/...` 
  * Components that have gone through the step of creating "stories"
    * UI documentation & testing
* **Non-Storybookized**
  * Location: `~/components/...`

***

### Database-related Component Folders

* Location: `~/components/database/...`
* Contents:
  * 📄 \_config.ts
  * 📁 \_lib
    * 📄 useMutations.ts
    * 📄 context.ts  *(optional)*
  * 📁 \_components
    * *(base/template components -- CRUD buttons, FormCRUD, Table, etc.)*

***

### Local Components

* Location: `.../_components/...`
* All non-reusable, non-database-related components should ultimately exist within an `_components` folder, which may be located within a [component folder](#general), in a ["route" folder](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/our-systems/pages/route-folder#components-optional), etc.


---

# 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://aaron-mota.gitbook.io/aarons-style-guide/frontend/our-systems/components/overview.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.