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) |