> For the complete documentation index, see [llms.txt](https://aaron-mota.gitbook.io/aarons-style-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aaron-mota.gitbook.io/aarons-style-guide/frontend/our-systems/components/overview.md).

# 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.