Awesome libs & packages for WEB applications & development (2024)
Published: 2024-02-12 15:56:24

How often do you find yourself struggling to decide what library or package you should use to implement one or another feature, this post won't help you with this, however, it will try to provide you with most awesome options)))

## Content
* [JavaScript Frameworks](#javascript-frameworks)
* [CSS frameworks](#css-frameworks)
* [UI Components](#ui-components)
* [Graphics & Animations](#graphics-amp-animations)
* [Validation & type safety](#validation-amp-type-safety)
* [Stores & State managers](#stores-amp-state-managers)
* [Date & Time](#date-amp-time)
* [Diagram Builders](#diagram-builders)
* [Data fetching](#data-fetching)

---
## JavaScript Frameworks

| Logo| Name | URL |
|------|-----|-----|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p76zehpnwutj2mu00kdf.png" alt="Next.js favicon">|Next.js|[https://nextjs.org/](https://nextjs.org/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1en49ku6plsc1dmldeq0.png" alt="Gatsby favicon">|Gatsby|[https://www.gatsbyjs.com/](https://www.gatsbyjs.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7x5ebg0c4hl8epjm27e.png" alt="Nuxtfavicon">|Nuxt|[https://nuxt.com/](https://nuxt.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybyptp8rr89rbsajdfeo.jpg" alt="Astro favicon">|Astro|[https://astro.build/](https://astro.build/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6e2suikx4qz1uipllt09.png" alt="Svelte favicon">|Svelte|[https://svelte.dev/](https://svelte.dev/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xltbwpowkjbpb61m5m72.png" alt="Qwik favicon">|Qwik|[https://qwik.dev/](https://qwik.dev/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g63hts3y01fu8sptttis.png" alt="Remix favicon">|Remix|[https://remix.run/](https://remix.run/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtqioughe0md7t4hbaw3.png" alt="SolidJS favicon">|SolidJS|[https://www.solidjs.com/](https://www.solidjs.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqh18cfmkihfw35vey8k.png" alt="Angular favicon">|Angular|[https://angular.io/](https://angular.io/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ex0vhxahqk6ycala6wnz.png" alt="Express favicon">|Express|[https://expressjs.com/](https://expressjs.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3p5bdnzvhpe61fox77dh.png" alt="Fastify favicon">|Fastify|[https://fastify.dev/](https://fastify.dev/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4hxilx6zkct230bmurj.png" alt="NestJs favicon">|NestJS|[https://nestjs.com/](https://nestjs.com/)|

[:top: Back to Top](#content)

---

## CSS frameworks

| Logo| Name | URL |
|------|-----|-----|
| <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qonkz5gh8kb1g6jtongp.png" alt="SASS favicon"/> | SASS|[https://sass-lang.com/](https://sass-lang.com/) |
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7qp6d1mj798lalzlrf6.png" alt="tailwindcss favicon">|Tailwind CSS|[https://tailwindcss.com/](https://tailwindcss.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1yiy0vujznvzsm9q2bw.png" alt="styled-components favicon">|Styled Components|[https://styled-components.com/](https://styled-components.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnobpus59ozla9lga717.png" alt="emotion favicon">|Emotion|[https://emotion.sh/docs/introduction/](https://emotion.sh/docs/introduction/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x5lhhwe9cxt22ecp17y.png" alt="Bootstrap favicon">|Bootstrap|[https://getbootstrap.com/](https://getbootstrap.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1zu0bb3t2gybvrd8y3s.png" alt="Bulma favicon">|Bulma|[https://bulma.io/](https://bulma.io/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yicti029bw18buuorwe5.png" alt="Semantic favicon">|Semantic UI|[https://semantic-ui.com/](https://semantic-ui.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37lc0ivxu3mrhaigox5g.png" alt="Materialize favicon">|Materialize CSS|[https://materializecss.com/](https://materializecss.com/)|


[:top: Back to Top](#content)

---

## UI Components

### Headless:

| Logo| Name | URL |
|------|-----|-----|
|<img src="https://headlessui.com/favicon.ico" alt="Headless UI favicon"/> |Headless UI|[https://headlessui.com/](https://headlessui.com/)|
| <img src="https://www.radix-ui.com/favicon.png" alt="Radix UI favicon">|Radix UI|[https://www.radix-ui.com/](https://www.radix-ui.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwt4upt90ic4xdk6o4c9.png" alt="React Aria favicon">|React Aria|[https://react-spectrum.adobe.com/react-aria/](https://react-spectrum.adobe.com/react-aria/)|


### Hybrid approaches:

| Logo| Name | URL |
|------|-----|-----|
|<img src="https://ui.shadcn.com/favicon.ico" alt="shadcn/ui favicon"/> |shadcn/ui|[https://ui.shadcn.com/](https://ui.shadcn.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqjwhf7nm4okmcotqu8x.png" alt="Kuma UI favicon">|Kuma UI|[https://www.kuma-ui.com/](https://www.kuma-ui.com/)|

### React:

| Logo| Name | URL |
|------|-----|-----|
|<img src="https://mui.com/favicon.ico" alt="Material UI favicon"/> |Material UI|[https://mui.com/material-ui/](https://mui.com/material-ui/)|
| <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54qdzbq7tir25jagdoct.png" alt="ant.design favicon"/> |Ant Design|[https://ant.design/](https://ant.design/)|
| <img src="https://chakra-ui.com/favicon.png" alt="Chakra UI favicon">|Chakra UI|[https://chakra-ui.com/](https://chakra-ui.com/)|
|<img src="https://nextui.org/favicon.ico" alt="shadcn/ui favicon"/> |NextUI|[https://nextui.org/](https://nextui.org/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a76rjjdno1y1fdx79k6.jpg" alt="Blueprint favicon">|Mantine|[https://mantine.dev/](https://mantine.dev/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmuafsoq7jp2xa1v15lf.jpg" alt="React Admin favicon">|React Admin|[https://marmelab.com/react-admin/](https://marmelab.com/react-admin/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw2id8xs9qzzgsfejjwe.png" alt="Blueprint favicon">|Blueprint|[https://blueprintjs.com/](https://blueprintjs.com/)|

### ﻿Vue:

| Logo| Name | URL |
|------|-----|-----|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4ztq4k30g336wyd28mm.png" alt="Quasar favicon">|Quasar|[https://quasar.dev/](https://quasar.dev/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhyh4redx66dvoqrl7v9.png" alt="Vuetify favicon">|Vuetify|[https://vuetifyjs.com/](https://vuetifyjs.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mupumj3risb5kd63ude1.png" alt="Buefy favicon">|Buefy|[https://buefy.org/](https://buefy.org/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bp2vkeheq3nhobyo5oey.png" alt="Vue Material favicon">|Vue Material|[https://www.creative-tim.com/vuematerial](https://www.creative-tim.com/vuematerial)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16qp1mrs0lp010dr4tdl.png" alt="Element Plus favicon">|Element Plus|[https://element-plus.org/](https://element-plus.org/)|

### ﻿Angular:

| Logo| Name | URL |
|------|-----|-----|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ay3cm8h9pmk2bn0soum.png" alt="Angular Material favicon">|Angular Material|[https://material.angular.io/](https://material.angular.io/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/calnqk7mmfnznfc34s27.png" alt="Clarity favicon">|Clarity|[https://clarity.design/](https://clarity.design/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v15dolgumnx2bkx9jka6.png" alt="PrimeNG favicon">|PrimeNG|[https://primeng.org/](https://primeng.org/)|

### Other:

| Logo| Name | URL |
|------|-----|-----|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93tpwc0mh0tjruf1cnl4.png" alt="Svelte Material UI favicon">|Svelte Material UI|[https://sveltematerialui.com/](https://sveltematerialui.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cm5x7rfelpwrynnl3ytg.png" alt="Smelte favicon">|Smelte|[https://smeltejs.com/](https://smeltejs.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp1p3syfjbqlti85d2mm.png" alt="QwikUI favicon">|QwikUI|[https://qwikui.com/](https://qwikui.com/)|

[:top: Back to Top](#content)

---

## Graphics & Animations

| Logo| Name | URL |
|------|-----|-----|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1e4epx7oskx3xq1yr084.png" alt="Three.js favicon">|Three.js|[https://threejs.org/](https://threejs.org/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/136ftzze4q84f377fnun.png" alt="PixiJS favicon">|PixiJS|[https://pixijs.com/](https://pixijs.com/)|
|![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpvygow16phtyjwkgm83.png)|Framer Motion|[https://www.framer.com/](https://www.framer.com/)|

[:top: Back to Top](#content)

---

## Validation & type safety
| Logo| Name | URL |
|------|-----|-----|
| <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l125g8kdprpmychmors.png" alt="zod favicon"> |Zod|[https://zod.dev/](https://zod.dev/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2slazhwzfkms1yuxfau9.png" alt="joi favicon">|Joi|[https://joi.dev/](https://joi.dev/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a76he00x9qj28vym1zuv.png" alt="Ajv favicon">|Ajv|[https://ajv.js.org/](https://ajv.js.org/)|
| None |Yup|[https://github.com/jquense/yup](https://github.com/jquense/yup)|
| None | Class-validator |[https://github.com/typestack/class-validator](https://github.com/typestack/class-validator)|

[:top: Back to Top](#content)

---

## Stores & State managers
| Logo| Name | URL |
|------|-----|-----|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4nkzrz836pjxi7ybnbg.png" alt="Redux favicon">|Redux|[https://redux.js.org/](https://redux.js.org/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fesz7219rmjxr9ugzd0s.png" alt="MobX favicon">|MobX|[https://mobx.js.org/](https://mobx.js.org/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eoz2swometl2yp2i0zll.png" alt="Zustand favicon">|Zustand|[https://zustand-demo.pmnd.rs/](https://zustand-demo.pmnd.rs/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivpf0bcgm6ow7m0g6p13.png" alt="RxJS favicon">|RxJS|[https://rxjs.dev/](https://rxjs.dev/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghlkq7mzg2c2n7r6nti6.png" alt="Recoil favicon">|Recoil|[https://recoiljs.org/](https://recoiljs.org/)|
| None |localforage|[https://github.com/localForage/localForage](https://github.com/localForage/localForage)|
| None |js-cookie|[https://github.com/js-cookie/js-cookie](https://github.com/js-cookie/js-cookie)|

[:top: Back to Top](#content)

---

## Date & Time
| Logo| Name | URL |
|------|-----|-----|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdrab6em82olznfj81yj.png" alt="moment favicon">|moment|[https://momentjs.com/](https://momentjs.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgqllzslils3dry50em7.png" alt="dayjs favicon">|dayjs|[https://day.js.org/](https://day.js.org/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcrg3e5y3s2lmlqfdtr5.png" alt="moment-timezone favicon">|moment-timezone|[https://momentjs.com/timezone/](https://momentjs.com/timezone/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb1nlc6pyts1z9wgchwy.png" alt="date-fns favicon">|date-fns|[https://date-fns.org/](https://date-fns.org/)|
| None |ms.js|[https://github.com/vercel/ms](https://github.com/vercel/ms)|
| None |fecha|[https://github.com/taylorhakes/fecha](https://github.com/taylorhakes/fecha)|

[:top: Back to Top](#content)

---

## Diagram Builders

| Logo| Name | URL |
|------|-----|-----|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svkyhx42d9oa3yb0jmij.png" alt="D3.js favicon">|D3.js|[https://d3js.org/](https://d3js.org/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlmpbouuy24exlnhsbqz.png" alt="GoJS favicon">|GoJS|[https://gojs.net/latest/index.html](https://gojs.net/latest/index.html)|

[:top: Back to Top](#content)

---

### Data fetching
| Logo| Name | URL |
|------|-----|-----|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kne31vpbh7qi5xxz1ls.png" alt="Axios favicon">|Axios|[https://axios-http.com/](https://axios-http.com/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zy1t18ai6ngg81o5f5w6.png" alt="SWR favicon">|SWR|[https://swr.vercel.app/](https://swr.vercel.app/)|
|<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h76gp90ghfcm8ka1uz5.png" alt="Wretch favicon">|Wretch|[https://elbywan.github.io/wretch/](https://elbywan.github.io/wretch/)|
| None |ky|[https://github.com/sindresorhus/ky](https://github.com/sindresorhus/ky)|

[:top: Back to Top](#content)