Bookmarks
Software Dev Things
Libraries and UI Resources

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 NameDescription
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 NameDescription
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 NameDescription
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 NameDescription
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 GeneratorCSS3 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 NameDescription
Coolors (opens in a new tab)Color pallete generator
ColorSpace (opens in a new tab)Alternative color pallete generator

React Libraries

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