# 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](../../config-and-tooling/editor-ide-setup/snippets), ["format on save"](../../config-and-tooling/editor-ide-setup/formatting/format-on-save), 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), [named export](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/basic-guidelines/react), [one exported component per file](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/basic-guidelines/react),  [component files vs component folders](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/basic-guidelines/react), [multiple early returns](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/basic-guidelines/react), [event handler syntax](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/basic-guidelines/react),&#x20;
{% 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), [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/...`&#x20;
  * 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.
