Libraries and UI Resources
Design Concept or Theories
| Site Name |
|---|
| Atomic Design by Brad Frost |
Some Interesting Libraries (Third Party)
| Site Name | Description |
|---|---|
| Party Town | Run Third-Party Scripts From A Web Worker |
| Crisp | The all-in-one multichannel messaging platform that connects companies & customers |
Styling Libraries
| Site Name | Description |
|---|---|
| Daisy UI | Daisy UI made using Tailwind |
| Chakra UI | UI Library and styling for React & Next using props for the styling process |
| SaSS | CSS pre-processor |
| Tailwind CSS | CSS Utility Class Tool |
| Tailwind Kit | A site contains most used Tailwind Component |
UI Component Libraries
| Site Name | Description |
|---|---|
| Auto Animate | Add motion to your apps with a single line of code. |
| Pico CSS | Minimal CSS Framework for semantic HTML |
| Swiper JS | Carousel Component |
| React Hot Toast | Toast component for React |
| Headless UI | Contain headless components like tabs, disclosure, etc |
| Radix Primitives | Primitive component Library |
| Rough Notaition | Library to create and animate annotations on a web page |
CSS & SCSS
| Site Name | Description |
|---|---|
| Anime JS | A lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. |
| Defensive CSS | Practical CSS and design tips that helps in building future-proof user interfaces. |
| CSS Layout | Popular CSS layout and patterns |
| CSS Reset | Reset the stylesheet agent so we get a consistent result in all sorts of browsers |
| CSS Normalize | CSS Reset Alternative |
| CSS3 Generator | CSS3 Generator |
| CSS Buttons | CSS button collections |
| Keyframes App | CSS Generator (animation, color, shadow, and character codes) |
| Neumorphism | Generate Soft-UI CSS Code |
| W3Schools CSS | Learn CSS |
| UI Snippets | CSS Snippets for some UI components |
Coloring
| Site Name | Description |
|---|---|
| Coolors | Color pallete generator |
| ColorSpace | Alternative color pallete generator |
React Libraries
| Site Name | Description |
|---|---|
| Content Layer | Contentlayer turns your content into data - making it super easy to import MD(X) and CMS content in your app |
| React Icons | Collection of icons from different sources |
| React Dropzone | Simple React Hook to create an HTML5-compliant drag & drop zone for file. |
| Formik | React form management and validation |
| Yup | A validation library, usually paired with Formik |
| SWR | A library to cleanly fetch data from API |
| Zustand | React State Management Library using Hooks |
| React Date Picker | Date picker component |
Config Libraries
| Site Name | Description |
|---|---|
| Prettier | Code Formatting |
| Lint Staged | Run linter on staged files |
| ESLint | Linting |
| Husky | Git Hooks automation tool |
| Standard version | Changelog generator (versioning) |