Libraries
Here are some notable libraries that I usually use.
Styling Libraries
| Library | Description |
|---|---|
| Tailwind CSS (opens in a new tab) | utility class |
| SASS / SCSS (opens in a new tab) | CSS pre-processor |
| Chakra UI (opens in a new tab) | great component library with great default style |
Resources
- Blog: Styling Best Practices I Use With Tailwind CSS (opens in a new tab)
- Library: Tailwind CSS Base Style (opens in a new tab)
UI Component Libraries
Library for UI Components like a carousel, toast, tabs, etc.
| Library | Description |
|---|---|
| Swiper (opens in a new tab) | Carousel, there is a wrapper for react if you use react |
| React Hot Toast (opens in a new tab) | Toast with great default style |
| Headless UI (opens in a new tab) | Have a lot of headless components like tabs, disclosure, radio, etc. |
| Radix Primitives (opens in a new tab) | Primitive component library |
| Rough Notation (opens in a new tab) | Library to create and animate annotations on a web page |
Resources
- Library: React Hot Toast (opens in a new tab), some snippets and hooks
React Libraries
Libraries that I use with React.
| Library | Description |
|---|---|
| React Icons (opens in a new tab) | Collection of icons from different sources, really handy |
| React Dropzone (opens in a new tab) | Upload Dropzone component |
| React Image Lightbox (opens in a new tab) | Lightbox for images |
| React Hook Form (opens in a new tab) | Form management, and validation |
| Yup (opens in a new tab) | Validation library, paired with react-hook-form |
| SWR (opens in a new tab) | Library to cleanly fetch data from API |
| Zustand (opens in a new tab) | State management library |
| React Datepicker (opens in a new tab) | Datepicker component |
Resources
- Blog: 7 Form Components For React Hook Form I Always Use (opens in a new tab)
- Example: RHF Input & Multi-step Form (opens in a new tab)
Config Libraries
Development config such as code formatting, linting, etc.
| Library | Description |
|---|---|
| Prettier (opens in a new tab) | Code formatting |
| ESLint (opens in a new tab) | Linting |
| Lint Staged (opens in a new tab) | Only run linter on staged files |
| Husky (opens in a new tab) | Automation for git hooks |
| Standard Version (opens in a new tab) | Changelog generator |
Resources
Last updated on February 12, 2023