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