DEV Community: ThemeSelection

Top Cyber Deals for Developers & Designers in 2025 🤩

ThemeSelection — Fri, 21 Nov 2025 14:18:45 +0000

Cyber Deals 2025 are here, and the tech community is ready. This is the moment when developers and designers stock up on tools, templates, UI kits, and resources that upgrade their workflow for the year ahead. With heavy discounts and limited-time bundles, the savings can be huge.

Let's check out the best deals from ThemeSelection, shadcn/studio, FlyonUI & Pixinvent..!!

Biggest Cyber Deals For Developers & Designer of The Year 🤩

If you work in tech, these deals give you a chance to grab premium tools at a fraction of the usual cost. Whether you design, develop, or do both, the offers below help you work faster and ship better products.

ThemeSelection

ThemeSelection offers premium admin dashboards, UI kits, and templates built with clean code and strong performance. Their catalog supports Bootstrap, React, Laravel, Vue, Next.js, and more. For Cyber Deals 2025, they are offering 30% OFF Storewide.

Promo Code: CW30OFF

Cyber Big Bundle

This bundle packs all major ThemeSelection products into a single deal. You get dashboards, UI kits, Figma assets, and full templates that cover almost every modern tech stack. A one-stop package for teams and freelancers.

What’s Included?

19 premium templates
3 UI kits (design files)
30+ Stunning Dashboard layouts
200+ Elegant Pages
300+ Reusable components / UI Elements
500+ Useful Widgets and plenty more..!!

Sneat Dashboard Pro Bootstrap

Sneat is a polished Bootstrap 5 admin dashboard with clean components and ready-to-use layouts. It fits SaaS, analytics dashboards, internal tools, and more.

Key features:

Modern Bootstrap 5 UI
Multiple dashboard layouts
Reusable components
RTL support
Fully responsive pages

Materio MUI NextJS Admin Template

Materio is a premium admin template built on MUI and Next.js. It delivers speed, modularity, and the familiar MUI component ecosystem.

Key features:

Built with MUI + Next.js
Clean, minimal design
Dark mode support
Pre-built dashboards
Flexible folder structure

Shadcn Studio

Shadcn Studio helps you ship polished UI with the shadcn/ui styling system. The Pro version offers production-ready blocks, templates, Figma files, and AI-powered tools that speed up design and development.

For Cyber Deals 2025, you get FLAT 30% OFF (Limited Time – Biggest Sale of the Year)

Promo Code: BFCM30SS

Shadcn Blocks

Shadcn Blocks are ready to use UI components that help you build pages fast without assembling everything from scratch. They are clean, responsive, and easy to customize.

Key features:

Dozens of page sections
Built on shadcn/ui
Developer-friendly structure
Works with modern frameworks

Shadcn Templates

These templates give you full starter projects that cover SaaS, dashboards, landing pages, and internal tools.

Key features:

Professional layouts
SEO-friendly structure
Built with modern tooling
Easy branding updates

Shadcn Figma Kit

The Shadcn Figma Kit mirrors the shadcn/ui system for designers. It keeps components consistent across design and development.

Key features:

Fully layered Figma components
Auto layout ready
Matches shadcn/ui styles
Easy for team handoff

AI Powered Theme Generator

This tool uses AI to create theme palettes, component styles, and variations on the fly.

Key features:

Instant theme creation
Custom color systems
Exports code-ready tokens
Works with major frameworks

Shadcn AI MCP

The AI MCP helps you generate code, content blocks, and UI variations inside your workflow.

Key features:

AI-powered component generation
Tailored code suggestions
Smart UI adjustments
Time-saving automation

Licenses

Developer: PRO, Team, Enterprise
Designer: PRO, Team, Enterprise
Developer + Designer: PRO, Team, Enterprise

For more info check the pricing.

FlyonUI

FlyonUI offers Tailwind-based components, templates, and Figma resources that make it easy to ship modern UIs. The Pro version adds premium components, advanced templates, AI tools, and full access to everything they offer.

During Cyber Deals 2025, FlyonUI is offering FLAT 30% OFF. It is the biggest deal of the year and for a limited time. So, hurry before it vanishis away…!!

Promo Code: BFCM30FY

Tailwind Blocks

FlyonUI Blocks give you structured sections you can plug into any project without reworking styles.

Key features:

Tailwind-ready
Clean, responsive design
Easy to customize
Covers core page sections

Tailwind Templates

These templates help you launch products faster with polished pages for SaaS, dashboards, landing pages, and marketing sites.

Key features:

Multi-page templates
Fast performance
Designed for Tailwind
Developer-friendly layout

Tailwind Figma Kit

The Figma Kit provides design components that match the FlyonUI system for easy handoff.

Key features:

Organized design library
Consistent UI elements
Pixel-perfect layout
Matches UI component code

Tailwind AI MCP

The AI MCP helps teams generate UI ideas, code snippets, and layouts using AI.

Key features:

Automated UI suggestions
Smart code generation
Flexible for different stacks
Helps speed up prototyping

Licenses

Developer: PRO, Team, Enterprise
Designer: PRO, Team, Enterprise
Developer + Designer: PRO, Team, Enterprise

For pricing details check the Pricing page.

Pixinvent

Pixinvent is known for its high-quality admin dashboards and UI kits. Their products support major frameworks including Vue, React, Next.js, Laravel, Django, and more. For Cyber Deals 2025, they are offering 30% OFF on selected products.

Grab your deals before it vanishes away..!!

Vuexy – Vuejs, Nuxt, Next.js, HTML, Laravel, Asp.Net & Django

Vuexy is one of the most popular admin templates in the world. It offers clean design, fast performance, and versions across all major frameworks.

Key Features:

Clean, modern UI
Multiple framework versions
Advanced charts and analytics
RTL and dark mode support
Extensive components library & much more.

Materialize – Next.js, Vuejs, Nuxt, HTML, Laravel, Django, Asp.Net

Materialize delivers a Material Design look with code that scales well for dashboards, internal tools, and SaaS platforms.

Key Features:

Material Design interface
Versions for all major frameworks
Pre-built dashboards and layouts
Modular components
Fast-loading pages
Developer-friendly folder setup & much more

Vuexy – Figma Admin Dashboard Builder & UI Kit

A full Figma UI kit that matches the Vuexy design system. Perfect for design teams who want a clean and consistent dashboard library.

Key Features:

Complete Figma dashboard design system
Organized components and variants
Auto layout ready
Pixel-perfect design
Matches Vuexy’s code-based UI

Conclusion

Cyber Deals 2025 bring some of the strongest discounts of the year for developers and designers. Whether you want dashboards, templates, UI kits, AI tools, or full bundles, these offers help you save money and speed up your workflow for the year ahead. If you want to level up your toolkit, this is the best time to grab the resources that will shape your builds in 2025.

How to Make Modal Popup Responsive in Bootstrap? 🚀

ThemeSelection — Wed, 15 Oct 2025 07:20:06 +0000

A modal popup is a dialog box that appears on top of the page content to grab the user's attention. It's used for tasks like asking for confirmation, displaying messages, or showing forms without taking the user to a different page.

If you’ve been working with Bootstrap, you know how easy it is to use their pre-built components. The modal popup is one of them. It’s responsive, customizable, and can be styled to fit any project, whether you’re working on a simple form or a complex UI.

In this guide, we'll break down how Bootstrap modals work, how to use them, and how to customize them to meet your needs.

Getting Started with Bootstrap

Before you can use a Bootstrap modal, you need to include the Bootstrap library in your project. You can do this either by using CDN or npm.

CDN Setup:

Here’s how you can link the Bootstrap styles and script using a CDN:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

NPM Setup:

Alternatively, you can install it via npm if you're using a build system:

npm install bootstrap

Once included, you're ready to start using Bootstrap's modals!

Basic Modal Structure

Bootstrap's modal follows a simple structure. Here’s a basic modal with all the necessary elements:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Key components:

modal: The container element
modal-dialog: Wraps the modal content and positions it
modal-content: The box where your content goes
modal-header, modal-body, modal-footer: These divide your modal into sections for title, content, and action buttons.

For further details consider checking Bootstrap Modal PopUp Example by Sneat Bootstrap Admin Template. It is by far one of the best Bootstrap Templates for developers for building responsive web apps easily.

Triggering the Modal

There are two common ways to open a modal: using data attributes or the JavaScript API.

Using Data Attributes

This is the easiest method. You just need to add data-bs-toggle="modal" and data-bs-target="#yourModalId" to the button or link you want to use to open the modal.

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Open Modal
</button>

Using JavaScript

For more control (like when you need to open the modal programmatically), use the JavaScript API:

const modal = new bootstrap.Modal(document.getElementById('exampleModal'));
modal.show();

Modal Variations

Bootstrap offers a few variations of modals to make them more versatile for different use cases.

Static Backdrop

By default, you can close the modal by clicking outside of it. If you want to prevent that (e.g., for confirmation modals), use the data-bs-backdrop="static" option:

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false"> ... </div>

Scrollable Modal

If your modal content is too long, you can make just the body scrollable:

<div class="modal-dialog modal-dialog-scrollable"> ... </div>

Centered Modal

To center your modal vertically on the screen, use the modal-dialog-centered class:

<div class="modal-dialog modal-dialog-centered"> ... </div>

Fullscreen Modal

If you want the modal to take up the full screen, you can use the modal-fullscreen class:

<div class="modal-dialog modal-fullscreen"> ... </div>

Customizing Your Modal

While Bootstrap provides great default styling, you can easily customize your modals for a unique look.

Modal Sizes

Bootstrap offers pre-defined classes for small, large, and extra-large modals:

<div class="modal-dialog modal-sm"> ... </div>
<div class="modal-dialog modal-lg"> ... </div>

Styling

You can easily override the modal's .modal-content class for different themes, borders, or even backgrounds..

Animations

Bootstrap modals come with a fade animation. You can modify or replace this with your own custom animations.

Modal Events

Bootstrap modals also provide event hooks that are useful for triggering actions before or after a modal opens or closes. You can listen for events like show.bs.modal or hidden.bs.modal.

const modalElement = document.getElementById('exampleModal');

modalElement.addEventListener('show.bs.modal', () => {
  console.log('Modal is about to open');
});

modalElement.addEventListener('hidden.bs.modal', () => {
  console.log('Modal has been closed');
});

These events are perfect for dynamic content loading or performing actions based on user interaction.

Adding Dynamic Content

If you want to pass data into your modal dynamically (like editing user information), you can use JavaScript events.

For example, let’s say you want to edit a user’s info in the modal:

<button data-bs-toggle="modal" data-bs-target="#editUserModal" data-bs-id="42">Edit User</button>

In the JavaScript code:

const editUserModal = document.getElementById('editUserModal');
editUserModal.addEventListener('show.bs.modal', event => {
  const button = event.relatedTarget;
  const userId = button.getAttribute('data-bs-id');
  editUserModal.querySelector('.modal-body input').value = userId;
});

This lets you inject dynamic data into the modal every time it opens.

Best Practices for Using Modals

Don’t overuse modals: They should serve specific purposes like login, confirmation, or quick alerts. Avoid using them for entire forms or long content.
Ensure accessibility: Use ARIA attributes and ensure the modal is accessible to screen readers. Bootstrap handles most of this automatically, but always test with screen readers.
Use programmatic control: Use the JavaScript API to open and close modals when necessary for smoother user experiences.
Mobile-first approach: Make sure the modal works well on mobile. The fullscreen modal class is especially helpful for small screens.

Common Issues and Solutions

Modal Not Closing

If your modal isn't closing, check that your dismiss buttons are correctly set up with data-bs-dismiss="modal".

Scrolling Issues

Sometimes, especially on mobile, you might notice background scrolling even when the modal is open. Make sure to use the modal-backdrop class properly, or adjust your CSS to prevent it.

Nested Modals

Avoid nesting modals inside other modals as it can lead to poor user experience and tricky issues with focus and modal stacking.

Real-World Examples

Here are some common examples of modal use cases:

Login Modals: Quick authentication without leaving the page.
Confirmation Modals: Ask the user if they’re sure they want to delete something.
Image Lightboxes: Open a larger version of an image in a modal for better viewing.
Form Modals: Gather user input without redirecting to another page.

Conclusion

Bootstrap modals are a powerful tool that adds interactivity and enhances user experience in your web applications. With simple markup and minimal code, you can create responsive, customizable modals that are fully accessible and fit perfectly into your design.

By combining Bootstrap’s data API and JavaScript API, you can trigger modals dynamically and pass content seamlessly, making them highly adaptable for different needs.

For more information, check out the official Bootstrap modal docs.

Shadcn Studio - An Open Source Shadcn/ui Library is Here 🚀

ThemeSelection — Thu, 25 Sep 2025 14:00:42 +0000

Hey Devs! 👋

We’re super excited to announce the launch of Shadcn Studio — a free and open-source Shadcn/ui Library that we've been working on.

This library brings together the best of shadcn/ui with powerful AI powered theme editor.

It's also available on GitHub for the community to use, contribute, and improve.

A Little Backstory 💪

Our team has gave time and passion into building Shadcn Studio, and we're excited for the launch!

We’d love for you to try it out and share your feedback via GitHub issues or in the comments. Your input will help us make Shadcn Studio even better for everyone.

Table of Contents 📋

Table of Contents 📋
Overview 🌏
- Not a standard library, but a distribution of components
Why should I use shadcn/studio? 💡
This is where shadcn/studio shines ✨
Features ✨
Documentation 📚
Available Components 🧩
- Component Examples
Community 🤝
Credits 🤘
License ©
Useful Links 🎁

Overview 🌏

shadcn/studio isn't a traditional component library or a replacement for Shadcn. Instead, it's a unique collection that offers customizable variants of components, blocks, and templates. Preview, customize, and copy-paste them into your apps with ease.

Building on the solid foundation of the Shadcn components & blocks, we've enhanced it with custom-designed components & blocks to give you a head start. This allows you to craft, customize, and ship your projects faster and more efficiently.

Not a standard library, but a distribution of components

Following the philosophy of Shadcn, shadcn/studio isn't a conventional “install-from-NPM” library. Rather, it's an open-source distribution of components designed for maximum adaptability.

You can copy the code, modify styles, adjust logic, or integrate it with other tools—free from the limitations of typical libraries. This "open code" model empowers you to customize with confidence and creativity.

Why should I use shadcn/studio? 💡

shadcn/ui aims to provide core components with a unique distribution system, allowing developers to copy and paste reusable, customizable UI elements directly into their codebase.

While this approach offers flexibility and control, it comes with some limitations: a lack of diverse component variants examples, limited theme customization options, and limited pre-built blocks. Additionally, its extensive customization options, though powerful, can sometimes feel overwhelming, especially for those seeking a more guided or streamlined experience.

This is where shadcn/studio shines ✨

An open-source collection of copy-and-paste shadcn components, blocks, and templates - paired with a powerful shadcn theme generator to craft, customize, and ship faster 🚀. It provides a robust toolkit for building stunning, interactive user interfaces with ease.

Open-source: Dive into a growing, community-driven collection of copy-and-paste components, blocks, and templates.
Component & Blocks variants: Access a diverse, collection of customizable shadcn component and block variants to quickly build and style your UI with ease.
Animated variants with Motion: Add smooth, modern animations to your components, enhancing user experiences with minimal effort.
Powerful theme generator: Tailor your UI effortlessly with real-time previews, ensuring consistent, branded designs delivered faster.

Features: ✨

Live Theme Generator: See your shadcn components transform instantly as you experiment with styles in real time.
Color Mastery: Play with background, text, and border hues using a sleek color picker for a unified design.
Typography Fine-Tuning: Perfect your text with adjustable font sizes, weights, and transformations for a polished look.
Tailwind v4 Compatibility: Effortlessly use Tailwind v4, supporting OKLCH, HSL, RGB & HEX color formats.
Stunning Theme Starters: Kick off with gorgeous pre-built themes and customize light or dark modes in a breeze.
Hold to Save Theme: Preserve your custom themes with a quick hold, making them easy to reuse or share later.

Documentation 📚

For comprehensive documentation, please visit Shadcn Studio docs.

Available Components 🧩

shadcn/studio provides an open-source collection of copy-and-paste Shadcn Components designed to accelerate your project development. Below is a summary of the available component categories:

Component Examples

Explore all components

Community 🤝

Join the shadcn/studio community to discuss the library, ask questions, and share your experiences:

🐦 Follow us on Twitter
🎮 Join us on Discord

Credits 🤘

We are grateful for the contributions of the open-source community, particularly:

shadcn/ui
tweakcn (Our Theme Generator is heavily inspired by tweakcn)

These projects form the backbone of shadcn/studio, allowing us to build a powerful copy-and-paste components.

License ©

Copyright © ThemeSelection
Licensed under MIT
shadcn/studio is an open-source collection of copy-and-paste shadcn/ui components, blocks, and templates - paired with a powerful Shadcn theme generator to craft, customize, and ship faster.

Useful Links 🎁

Learn How to Use Bootstrap Icons easily

ThemeSelection — Mon, 22 Sep 2025 04:44:03 +0000

How to Use Bootstrap Icons? - Guide with Examples 👨🏻‍💻

Ajay Patel for ThemeSelection ・ Sep 18

#bootstrap #programming #webdev #beginners

10+ Stunning React Icon Library

ThemeSelection — Fri, 13 Jun 2025 07:06:23 +0000

Icons are the unsung heroes of web design, adding visual flair and intuitive navigation to your React projects.

Whether you’re building a sleek dashboard or a vibrant e-commerce site, the right icon library can make your user interface pop while keeping things functional.

In this blog, we’ll dive into why React icon libraries are a game-changer and explore 12 trending libraries that are stealing the show in 2025.

Each one brings something unique to the table, so let’s find the perfect fit for your next project!

Why Use a React Icon Library?

Why use a React Icon Library?

React icon libraries are a developer’s best friend for a reason. They save time by offering pre-designed, customizable icons that integrate seamlessly with React components.

No need to wrestle with manual SVG imports or inconsistent designs — these libraries deliver scalability, flexibility, and a polished look.

Plus, they often come with multiple styles and formats, ensuring your UI stays cohesive across devices.

With open-source options and easy-to-use APIs, they’re a must-have for building stunning, user-friendly interfaces without breaking a sweat.

Top React Icon Libraries for 2025

1. Iconify

Iconify is a massive, open-source React icon library offering over 200,000 icons from 100+ icon sets, including Font Awesome, Material Design, and Tabler Icons. It’s a treasure trove for React developers, providing a unified API to access diverse icon collections without bloating your project.

With the @iconify/react package, integration is seamless, allowing you to import only the icons you need. Its SVG framework ensures crisp, scalable icons that load fast.

We’ve personally used Iconify at FlyonUI to enhance our UI components with vibrant, customizable icons, proving its versatility in real-world projects. Whether you’re building a dashboard or a landing page, Iconify’s flexibility makes it a top choice.

FlyonUI — An open-source Tailwind CSS Component Library

At FlyonUI, we leverage Iconify and Tabler Icons to power our component library, ensuring our UI elements are visually appealing and consistent. This integration allows us to offer developers a rich selection of icons that elevate the user experience effortlessly.

Features

Over 200,000 icons from 100+ icon sets
Seamless React integration via @iconify/react
Customizable size, color, and styles via props or CSS
Lightweight with on-demand icon loading
Supports animations and dynamic styling
Regular updates with new icon sets

Pricing & License

Free and open-source
MIT License

2. Lucide

Lucide is a community-driven icon toolkit that’s all about clean, consistent, and modern designs. A fork of Feather Icons, it offers over 1,450 icons that are simple yet versatile.

Lucide’s icons are built for React, Vue, and other frameworks, with a focus on pixel-perfect precision.

Its easy-to-use API lets you tweak sizes and colors effortlessly, making it a favorite for developers who value minimalism and functionality.

We’ve used Lucide at Shadcnstudio.com to elevate our UI components with its sleek, customizable icons. Similarly, shadcn/ui uses Lucide as the default icon set. Therefore in our open-source theme editor and component library, shadcn/studio, ensuring a polished and cohesive UI.

Features

1,450+ icons with a sleek, modern aesthetic
Highly customizable with support for size, color, and stroke width
Compatible with React, Vue, and Svelte
Community-driven with regular updates
Lightweight and fast-loading SVGs

Pricing & License

Free and open-source
MIT License

What is Shadcn/studio?

Shadcn offers customizable variants of components, blocks, and templates. Preview, customize, and copy-paste them into your apps with ease.

Building on the solid foundation of the Shadcn registry, we’ve enhanced it with custom-designed components & blocks to give you a head start.

3. Lineicons

Lineicons stands out for its elegant, minimal icons available in multiple styles like solid, outline, and duo-tone. With over 2,000 icons, it’s perfect for creating professional-grade UIs.

This React icon library supports JSX, TSX, and SVG formats, making it a versatile choice for React developers. Its clean design ensures your project looks polished, and the icons are optimized for quick loading.

A great pick for those who want flexibility without overwhelming complexity.

Features

2,000+ icons in multiple styles (solid, outline, duo-tone)
Available in SVG, JSX, TSX, and other formats
Easy integration with React components
Lightweight and scalable for all devices
Regular updates with new icons

Pricing & License

Free and premium versions available
Custom licensing for commercial use (check Lineicons website for details)

4. Material UI Icons

Material UI (MUI) Icons bring Google’s Material Design to your React projects with over 2,100 sleek, modern icons. Part of the MUI ecosystem, these icons are perfect for developers already using Material UI components.

They come in five styles — filled, outlined, rounded, two-tone, and sharp — for maximum flexibility. With intuitive integration and extensive documentation, MUI Icons are ideal for building consistent, professional interfaces.

Features

2,100+ icons in five distinct styles
Seamless integration with Material UI components
Customizable via props for size, color, and style
Optimized for performance and scalability
Extensive documentation for easy setup

Pricing & License

Free to use
MIT License

5. Heroicons

Heroicons, crafted by the Tailwind CSS team, offers 316 high-quality SVG icons in solid and outline styles. These icons are designed for simplicity and integrate beautifully with Tailwind-based projects.

You can copy them as JSX or SVG, and their lightweight nature ensures fast performance. Heroicons is perfect for developers who want a curated, no-fuss collection for clean, modern UIs.

Features

316 SVG icons in solid and outline styles
Tailwind CSS compatibility for seamless styling
Copy as JSX or SVG for easy integration
Lightweight and fast-loading
Fully customizable colors and sizes

Pricing & License

Free and open-source
MIT License

6. Tabler Icons

Tabler Icons boasts over 5,600 pixel-perfect icons, making it one of the largest open-source libraries. Its clean, minimal designs are ideal for professional dashboards and web apps.

Available in SVG and PNG, the icons are lightweight and customizable, supporting React, Vue, and Svelte. Tabler’s versatility and massive collection make it a go-to for developers needing variety without sacrificing quality.

Features

5,600+ pixel-perfect icons
Available in SVG and PNG formats
Customizable styles, strokes, and colors
Compatible with React, Vue, and Svelte
Lightweight and high-quality for all devices

Pricing & License

Free to use
MIT License

7. Iconoir

Iconoir is an open-source library with over 1,300 simple, clean icons designed for modern web projects. Its minimalist aesthetic makes it perfect for developers who want lightweight, scalable icons without clutter.

Iconoir supports React and other frameworks, with easy customization options for size and color. It’s a great choice for creating uncluttered, user-friendly interfaces.

Features

1,300+ minimalist SVG icons
Compatible with React, Vue, and Svelte
Customizable size and color via CSS
Lightweight and optimized for performance
Open-source with community contributions

Pricing & License

Free to use
MIT License

8. Phosphor Icons

Phosphor Icons offers over 7,000 icons in multiple weights and styles, including regular, thin, bold, and filled. Its flexibility and massive collection make it ideal for any React project, from apps to websites.

The icons are highly customizable, with support for animations and dynamic styling. Phosphor’s clean design and extensive options make it a developer favorite.

Features

7,000+ icons in multiple weights and styles
Customizable with animations and dynamic styling
Compatible with React, Vue, and other frameworks
Lightweight and scalable SVGs
Regular updates with new icons

Pricing & License

Free and open-source
MIT License

9. React Social Icons

React Social Icons is a niche library focused on social media icons, perfect for adding branded buttons to your website. It includes icons for platforms like Twitter, Facebook, and LinkedIn, with customizable colors and sizes.

The library is lightweight and easy to integrate, making it ideal for footers or contact sections. If your project needs social media flair, this is the one to pick.

Features

Icons for major social media platforms
Customizable colors, sizes, and hover effects
Lightweight and easy to integrate
Built specifically for React projects
Simple API for quick setup

Pricing & License

Free to use
MIT License

10. Xicons

Xicons is a versatile library that aggregates icons from multiple sources, including Vue and React-compatible sets. With thousands of icons, it offers a broad selection for any project.

The library is lightweight, customizable, and supports modern frameworks. Xicons is a solid choice for developers who want a comprehensive, all-in-one solution.

Features

Thousands of icons from multiple sources
Compatible with React and Vue
Customizable via CSS and props
Lightweight and optimized for speed
Regular updates and community support

Pricing & License

Free and open-source
MIT License

11. React UseAnimations

React UseAnimations specializes in animated icons, bringing your UI to life with micro-interactions. Built on Lottie, it offers a curated set of icons with smooth animations that enhance user engagement.

Perfect for adding dynamic flair to buttons or navigation, this library is easy to integrate and highly customizable. Ideal for projects where interactivity is key.

Features

Animated icons powered by Lottie
Customizable animation speed and styles
Lightweight and optimized for React
Easy integration with simple API
Supports hover and click interactions

Pricing & License

Free to use
MIT License

12. Lobe Icons

Lobe Icons, built on Lucide, is a customizable React component library for AIGC web apps. It offers a rich selection of icons with support for sizes, colors, and animations.

Designed for modern UI development, it’s perfect for developers building AI-driven interfaces. Its flexibility and clean design make it a standout for specialized projects.

Features

Based on Lucide with enhanced customization
Supports sizes, colors, and animations
Ideal for AIGC and modern web apps
Lightweight and React-compatible
Community-driven with regular updates

Pricing & License

Free and open-source
MIT License

13. React Icons

React Icons is a powerhouse, bundling thousands of icons from popular packs like Font Awesome, Material Design, and Heroicons into one convenient library.

With over 3,000 icons, it’s a one-stop shop for developers needing variety without complexity. You can import icons as React components, making integration a breeze.

Its lightweight design and customizable options ensure fast load times and consistent styling. Perfect for projects where you want access to multiple icon sets without juggling dependencies.

Features

Over 3,000 icons from multiple libraries like Font Awesome and Bootstrap Icons
Import icons as React components for easy integration
Customizable colors and sizes via props
Lightweight and optimized for performance
Regular updates with new icon packs

Pricing & License

Free to use
MIT License for flexible, open-source usage

Wrapping Up

Choosing the right React icon library can transform your project, balancing aesthetics with functionality.

Whether you need a massive collection like Tabler Icons, animated flair from React UseAnimations, or a minimalist vibe from Lucide, there’s something for everyone in 2025.

Most of these libraries are free and open-source, so you can experiment without breaking the bank.

Dive in, play around with these libraries, and let your UI shine! Which one’s your favorite? Let us know in the comments!

About us

We, at ThemeSelection, provide selected high-quality, modern design, professional and easy-to-use premium and free Admin Panels, such as Bootstrap Templates, React Dashboard, Asp NET Core Templates, Vue Templates, Next JS Templates, UI Kits, and SaaS Boilerplate.

If you are looking for free admin templates, UI kits and themes then do visit our site…!!

10+ Best Open-Source Alternatives to Your Favorite SaaS

ThemeSelection — Thu, 27 Mar 2025 13:58:47 +0000

Hey there! Have you ever caught yourself wondering if there’s a free, open source alternatives tool that’s just as awesome as the pricey SaaS software you’re using?

Well, you’re in luck, we've rounded up some hidden gems that can totally replace the big names you know and love.

These open source alternatives are powerful, customizable, and perfect for developers and SaaS users who want to save money without sacrificing quality.

Ready to explore and save some cash? Let’s get started!

Open Source SaaS Alternatives

1. AppFlowy – The leading open-source Notion alternative

What It Does: AppFlowy, is an open source alternative to Notion that brings projects, wikis, and teams together in one sleek, AI-collaborative workspace. The best part? You keep full control of your data—no compromises!

Why use AppFlowy?: It’s lightweight, customizable, and built with privacy in mind, making it a solid pick for anyone who wants Notion’s vibes without the subscription.

Main Features:

AI Collaboration: Smart tools to boost teamwork and productivity.
Data Control: Self-host it to keep your info secure and private.
Flexible Workspaces: Organize projects, notes, and wikis your way.

Check It Out: appflowy.io | Follow: @appflowy

2. NocoDB – Build Databases As Spreadsheets (Airtable Alternative)

What It Does: NocoDB turns database-building into a breeze by blending the simplicity of spreadsheets with no-code power—an awesome open source alternative to Airtable.

Why use NocoDB?: It’s perfect for creating custom databases fast, whether you’re managing data for a startup or a side project. Plus, it’s free and flexible!

Main Features:

Spreadsheet Interface: Build and edit databases like you’re using Excel.
No-Code Simplicity: No coding skills? No problem—get started in minutes.
Customizable: Tweak it to fit your workflow with ease.

Check It Out: nocodb.com | Follow: @nocodb

3. Hoppscotch – Supercharge Your API Development (Open Source Alternative to Postman)

What It Does: Hoppscotch is an open-source API development ecosystem that makes creating and testing API requests a total time-saver—say goodbye to Postman’s price tag!

Why use Hoppscotch?: It’s lightweight, fast, and community-driven, giving devs everything they need to streamline API workflows without the bloat.

Main Features:

Quick Testing: Send and test API requests in real-time.
Team Collaboration: Share collections with your crew effortlessly.
Open Ecosystem: Extend it with custom scripts and integrations.

Check It Out: hoppscotch.io | Follow: @hoppscotch_io

Featured Tool: Jetship – Kickstart Your SaaS with ThemeSelection’s Next.js Boilerplate

Speaking of building smarter, we at ThemeSelection have something special for you: Jetship, our Next.js SaaS boilerplate that we recently launched built on Next js, ShadCN, and FlyonUI and powered by Supabase.

It’s not an open source alternative but a turbocharged starting point for your next big idea. With pre-built goodies like authentication, payments, and dashboards, Jetship lets you launch a polished, scalable SaaS app in record time.

It’s customizable, developer-friendly, and designed to save you from reinventing the wheel—so you can focus on what makes your SaaS unique.

Why You’ll Love It:

Ready-to-Go Components: Auth, subscriptions, and more—out of the box.
Brand-Friendly Design: Tweak the look to match your vision.
Built to Scale: A solid Next.js foundation for your growing app.

Get Started: JetShip Nextjs Starter Kit | Follow: @Theme_Selection

4. Supabase – Backend Bliss in Minutes (Firebase Alternative)

What It Does: Supabase is a Backend-as-a-Service (BaaS) platform built on PostgreSQL, offering an open-source way to whip up web and mobile backends faster than you can say “Firebase.”

Why use Supabase?: It’s got a simple setup, a user-friendly interface, and all the firepower you need to build scalable apps without the proprietary lock-in.

Main Features:

Real-Time Database: Instant updates with PostgreSQL magic.
Auth Made Easy: Built-in authentication for users and APIs.
Scalable & Open: Self-host or use their cloud—no limits!

Check It Out: supabase.com | Follow: @supabase

Check our recently launched Shadcn/studio if you're a shadcn lover!

Shadcn/studio offers customizable variants of components, blocks, and templates. Preview, customize, and copy-paste them into your apps with ease.

5. Coolify – Deploy Like a Pro (Heroku/Netlify/Vercel Alternative)

What It Does: Coolify is a self-hosted, open-source deployment platform that lets you easily manage and launch apps—a killer substitute for Heroku, Netlify, or Vercel.

Why use Coolify? It’s all about control and cost—host it yourself, deploy anything, and skip the monthly bills.

Main Features:

One-Click Deploys: Launch apps without the hassle.
Self-Hosted Freedom: Run it on your server or VPS.
Multi-App Support: Manage web apps, databases, and more in one place.

Check It Out: coolify.io | Follow: @coolifyio

6. Plane – Project Management, Open-Source Style (JIRA/Linear/Monday/Asana Alternative)

What It Does: Plane is an open-source project management tool designed to track issues, run sprints, and map out product roadmaps. It is a perfect open source alternative for JIRA, Linear, Monday, or Asana.

Why Developers & SaaS Love It: It’s clean, intuitive, and free, giving teams a flexible way to stay organized without the corporate price tag.

Main Features:

Issue Tracking: Keep tabs on bugs and tasks effortlessly.
Sprint Planning: Run cycles like a pro with built-in tools.
Roadmap Views: Visualize your product’s future with clarity.

Check It Out: plane.so | Follow: @planepowers

7. Mattermost – The Open-Source Slack Alternative

What it does: Mattermost is an open source alternative to Slack used as a collaboration platform designed with developers and technical teams in mind. It's a self-hosted messaging hub that brings chats, files and tools into one secure place.

Why use Mattermost? It’s all about control and flexibility. You can host it yourself, tweak it to fit your needs, and keep your data safe behind your firewall. Plus, it has deep integrations and a community-driven vibe that keeps it evolving.

Main Features

Real-time collaboration
Secure, Scalable and self-hosting messaging
1-1 audio calls and screen sharing
Available in 20 languages
Channel-based messaging for web, desktop and mobile
Peer-to-peer forum, and many more...

Check It Out: mattermost.com | Follow: @Mattermost

8. PostHog - Open Source Analytics Powerhouse

What it Does: PostHog is an open-source powerhouse that combines product analytics, session replays, and feature flags into one neat package. It'an alternative to Mixpanel or Amplitude. It’s built to help you track user behaviour, test ideas, and improve your product, all while keeping your data in-house if you want.

Why use PostHog?: It’s got everything you need to dig into user insights without the SaaS subscription baggage. Self-host it for privacy and control, or use their cloud option for speed—either way, it’s a win for teams who want flexibility and power.

Main Features:

Event-Based Analytics: Automatically track clicks, page views, and custom events to see exactly how users interact with your app or site.
Session Replays: Watch real user sessions (with privacy controls) to spot bugs, pain points, or UX wins—no guesswork needed.
Feature Flags & A/B Testing: Test new features with specific users and measure the impact before going all-in.
Heatmaps: Visualize where users click and scroll to optimize your interface like a pro.
Self-Hosted or Cloud: Run it on your own servers for total control or use PostHog Cloud for a hassle-free setup—your call!

Check It Out: posthog.com | Follow: @posthog

9. n8n – Automate Like a Pro (Zapier Alternative)

What It Does: n8n is an open-source workflow automation tool that’s here to take on Zapier—and win! It lets you connect your favourite apps, APIs, and services to automate tasks without the hefty subscription fees. Whether you’re syncing data, triggering actions, or building complex workflows, n8n puts the power in your hands with a visual editor that’s as easy as it is powerful. Plus, you can host it yourself for total control—how cool is that?

Why use n8n? It’s a dream for anyone who loves automation but hates being locked into SaaS pricing or limitations. n8n is flexible, extensible, and built with developers in mind—think of it as your personal automation playground. From startups to SaaS teams, it’s perfect for saving time and streamlining processes without breaking the budget.

Main Features:

Visual Workflow Builder: Drag and drop to create automation—no coding required (though coders can dive in too!).
App Integrations: Connects with hundreds of tools like Slack, Google Sheets, and even custom APIs.
Self-Hosted Option: Run it on your server for privacy and unlimited workflows—bye-bye usage caps!
Custom Scripts: Add JavaScript or Python to supercharge your workflows with bespoke logic.
Community-Driven: Tons of pre-built nodes and an active community to keep things fresh and helpful.

Check It Out: n8n.io | Follow: @n8n_io

10. Cal.com – Your Friendly Calendly Alternative

What It Does: Cal.com is an open-source gem that makes scheduling a breeze—no more email ping-pong! It’s a Calendly alternative that lets you sync your calendars and share a link for folks to book time with you, all while keeping things simple and customizable.

Why use Cal? It’s free for individuals, self-hostable, and puts you in charge of your data. Perfect for devs who want control without the SaaS fuss.

Main Features:

Calendar Sync: Works with Google, Outlook, and Apple Calendar to avoid double bookings.
Custom Links: Set your availability and share a personal booking link.
Self-Hosted Option: Host it yourself or use their service—your call!

Try It: cal.com | Follow: @calcom

11. Documenso – Sign Docs Like a Pro (DocuSign Alternative)

What It Does: Documenso is an open-source buddy that takes on DocuSign, letting you sign and manage documents digitally with ease. It’s straightforward and keeps your data close.

Why use Documenso ? It’s privacy-focused and flexible—great for anyone tired of pricey e-signature tools. Plus, it’s got a human touch that makes signing feel less robotic.

Main Features:

Easy Signing: Sign docs fast with a clean, step-by-step flow.
Self-Hosting: Keep it on your servers for full control.
API Integration: Connect it to your workflows with an open API.

Check it out documenso.com | Follow: @documenso

12. Plausible – Simple Analytics (Google Analytics Alternative)

What It Does: Plausible is like a breath of fresh air for anyone tired of Google Analytics’ complexity and privacy baggage. It’s an open-source, lightweight tool that tracks your website’s traffic—think page views, visitors, and referrals—without cookies or invasive data grabs.

Why use Plausible ? It’s easy to use, privacy-first, and lets you keep your data close. Perfect for devs and SaaS folks who want insights without the clutter or consent pop-ups.

Main Features:

Cookie-Free Tracking: No banners needed—fully GDPR, CCPA, and PECR compliant.
Lightweight Script: Under 1KB, so your site stays fast.
Simple Dashboard: All your stats in one glance, no digging required.

Try It: plausible.io | Follow: @plausiblehq

13. Formbricks – Feedback That Feels Human (Typeform Alternative)

What It Does: Formbricks is an open-source champ for gathering user feedback—think surveys and forms—without the Typeform price tag. It’s built to help you understand your users through quick, targeted questions, all while staying flexible and privacy-friendly.

Why use Formbricks? It’s a developer’s dream—customizable and self-hostable—so you can skip the SaaS fees and still get real, actionable insights from your audience.

Main Features:

In-App Surveys: Ask users right where they are—no redirects.
Open-Source Freedom: Host it yourself or use their cloud option.
Granular Targeting: Reach specific users based on behaviour or traits.

Try It: formbricks.com | Follow: @formbricks

Why Make the Switch?

These open-source tools are more than just freebies—they’re crafted by passionate communities who get the grind of developers and SaaS builders like you. Think total flexibility, full control over your data, and the freedom to tweak every detail to match your vision.

Oh, and the cherry on top? You’re sidestepping those pesky subscription fees that eat into your budget.

It’s not just about saving cash—it’s about building smarter, on your terms.

Who wouldn’t jump at that?

About us

We, at ThemeSelection, provide selected high-quality, modern design, professional and easy-to-use premium and free Admin Panels, such as

We also offer the best Tailwind CSS Component Library. You can also consider checking All UtilityCSS for awesome Tailwind Resources & All ShadCN for useful Shadcn Resources such as Shadcn Blocks.

If you are looking for free admin templates, UI kits and themes then do visit our site…!!

Written by @abhidave001

CI/CD Pipeline: Everything You Need To Know

ThemeSelection — Tue, 25 Mar 2025 13:42:36 +0000

In today's software development world, efficiency is key, and one way to achieve that is through Continuous Integration (CI) and Continuous Deployment (CD). These practices automate the process of building, testing, and deploying applications, ultimately leading to faster, more reliable software delivery. In this blog, we will walk you through how the CI CD pipeline works, the stages of CI/CD, what tools can help you set them up, and provide a real-life example of how a project is automatically deployed using CI/CD.

What is CI/CD Pipeline?
Stages of CI/CD Pipeline
- 1. Source Stage
- 2. Build Stage
- 3. Test Stage
- 4. Package Stage
- 5. Deploying Stage
Tools for CI/CD
Why CI/CD?
- 1. Faster Development
- 2. Improve Code Quality
- 3. Better Collaboration Between Teams
Relationship Between DevOps and CI/CD
Real-World Scenario: Deploying a Web App Automatically
- Step 1: Create Your Project
- Step 2: Push Code to GitHub
- Step 3: Set Up GitHub Actions for CI/CD
Conclusion

What is CI/CD Pipeline?

Image Credit: Freepik

A CI/CD pipeline is used to automate software or infrastructure-as-code delivery, from source code to production. It can be thought of as a series of steps that needs to be taken for code to be released. It is an automated process that allows teams to quickly develop, test, and deploy applications in the server.

Continuous Integration(CI) refers to the practice of automatically integrating code changes from multiple contributors into a shared repository multiple times a day. Developers push their changes to the repository, and CI tools like GitHub Actions or Jenkins automatically build and test the application to ensure the new changes don't break anything.

Continuous Deployment (CD) automates the delivery of the built code to production or staging environments. The goal is to deploy new updates automatically, ensuring a smooth, rapid release process with minimal human intervention. CD takes place after the code successfully passes the testing stage of the pipeline. It refers to the automatic release to a repository after the CI stage.

Stages of CI/CD Pipeline

There are several stages of CI/CD before deploying it to production. It outlines the steps a development team takes to ensure code changes are automatically tested, built, and deployed efficiently. Here’s a breakdown of each stage in a typical CI/CD pipeline:

1. Source Stage

Description: The source stage involves the code commit made by a developer to the version control system (VCS), like Git. It triggers the CI/CD pipeline.
Actions:
- Developers push their changes (code, configuration, etc.) to the repository.
- Version control tools (e.g., GitHub, GitLab, Bitbucket) detect the changes and trigger the next stage in the pipeline.
Goal: To initiate the pipeline by committing changes to the codebase.

2. Build Stage

Description: The build stage is where the code gets prepared and turned into a ready-to-use package (artifact).
Actions:
- The CI server triggers the build process.
- It checks all the code dependencies, makes sure they’re available, and then compiles the code into the correct format.
- The build artifacts are stored in an artifact repository.
Goal: To convert the source code into a deployable artifact and ensure that the code integrates properly.

3. Test Stage

Description: The test stage is where automated tests are run to check if the code is working correctly and to catch any issues before the software is deployed.
Actions:
- Unit tests: Test individual components of the code.
- Integration tests: Ensure that different components work well together.
- If any tests fail, the pipeline halts, and the developer is notified to address the issues.
Goal: To ensure that new code changes do not introduce defects or regressions.

4. Package Stage

Description: This stage involves creating a deployable package (artifact) if the build and tests pass.
Actions:
- Packaging the code into deployable artifact.
- Versioning and tagging the package with the correct release version.
Goal: To package the code into a final artifact ready for deployment.

5. Deploying Stage

Description: In deploying stage, the code is deployed to non-production and production environments. It means your application or product was released.
Actions:
- In staging, the team does additional testing, like user acceptance testing (UAT), performance testing, or load testing, to make sure everything works as expected under conditions that are similar to real-world use.
- This environment is usually a replica of the production environment, but not live for users.
- Once approved, the artifact is deployed to the production environment, making it available to end users.
Goals: To release the new code to the users with minimal downtime and high availability.

Tools for CI/CD

To set up a CI/CD pipeline, you will need a few tools. Here are some of the popular ones:

GitHub Actions: A powerful CI/CD tool integrated directly into GitHub repositories.
Jenkins: An open-source automation server that provides hundreds of plugins to support building, deploying, and automating projects.
Bamboo: A CI/CD tool from Atlassian that integrates seamlessly with Jira and Bitbucket.
CircleCI: A cloud-native continuous integration and continuous delivery platform.
Docker: A tool to automate the deployment of applications in lightweight, portable containers.

Why CI/CD?

Continuous Integration and Continuous Deployment (CI/CD) offer several benefits that enhance software development efficiency, quality, and reliability. Here are the key benefits:

1. Faster Development

Automated Builds: Automates testing and deployment, reducing the time needed to release new features. This means developers don’t have to spend time manually building and deploying applications.
Faster Time-to-Market: With automated pipelines, new features, bug fixes, and updates can be delivered much faster, giving businesses a competitive edge.
Real-World Example: Companies like Netflix and Amazon deploy code thousands of times per day using CI/CD. This allows them to continuously deliver new features without disrupting users.

2. Improve Code Quality

Early Bug Detection: Continuous testing catches bugs early, preventing issues from reaching production.
Consistent Code Reviews: Since every change goes through automated testing and validation, developers get immediate feedback, leading to better code quality.
Real-World Example: Google’s CI/CD process includes thousands of automated tests per minute, ensuring only high-quality code reaches production.

3. Better Collaboration Between Teams

Faster Code Merging: Developers work on different branches, and CI/CD automatically integrates changes into the main codebase. This makes collaboration seamless.
Improved Communication: With automated testing and deployment, teams (developers, testers, DevOps) can focus on innovation instead of fixing integration issues.
Real-World Example: Facebook uses CI/CD to ensure thousands of engineers can work on the same codebase without conflicts.

Relationship Between DevOps and CI/CD

DevOps and CI/CD are closely related concepts in modern software development. CI/CD is a crucial component of DevOps, helping teams achieve faster and more reliable software delivery. While DevOps focuses on culture and collaboration, CI/CD automates the technical processes that enable rapid and reliable software releases.

DevOps is a philosophy and culture that promotes collaboration between development (Dev) and operations (Ops) teams. It focuses on automation, continuous monitoring, and integration to improve software quality and delivery speed.

CI/CD helps realize the full potential of DevOps by enabling speed, efficiency, and reliability in software development. Here's why it matters:

DevOps Principle	How CI/CD Supports It
Collaboration	Developers and Operations teams work together on automated pipelines.
Automation	CI/CD reduces manual tasks, ensuring faster and error-free deployments.
Continuous Feedback	Developers receive quick test results and production insights.
Faster Time-to-Market	CI/CD enables rapid release cycles with minimal disruptions.
Security & Compliance	Automated security tests (DevSecOps) ensure secure deployments.

DevOps Without CI/CD?

Possible, but inefficient. Without CI/CD, software releases become slow and error-prone.
DevOps relies on automation, and CI/CD is a major enabler of this automation.

CI/CD Without DevOps?

CI/CD can exist independently, but its full potential is unlocked within a DevOps culture.
Without DevOps, CI/CD may lack collaboration, monitoring, and security practices, leading to inefficiencies.

Real-World Scenario: Deploying a Web App Automatically

I have a DemosThemeselection hosted on GitHub that we want to deploy automatically to Themeselection(Offers templates and UI kits for building web applications). We will use GitHub Actions to set up our CI/CD pipeline.

Step 1: Create Your Project

Create a new directory and initialize your project according to your technologies:

mkdir demos-themeselection
cd demos-themeselection
npm init -y
npm install express

Step 2: Push Code to GitHub

Once the app/website is ready, initialize a Git repository and push it to GitHub:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/yourrepositoryname.git
git push

Step 3: Set Up GitHub Actions for CI/CD

Now, let’s configure GitHub Actions to automate the CI/CD process. GitHub Actions allows you to define workflows for different tasks, like testing, building, and deploying your code.

Create a directory .github/workflows in your project, and add a new file called eg: deploy.yml:

name: 🚀 Deploy - Demos ThemeSelection
run-name: ${{ inputs.is_production && '🚀'}} Deploy - Demos ThemeSelection

on:
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    env:
      DEPLOY_DIR: "${{ secrets.PROD_DIR }}"
      ORG_NAME: themeselection
      REPO_NAME: platform-demo

    steps:
      - run: echo "Deploying to production"

      - name: Checkout platform-demo repo
        uses: actions/checkout@v4
        with:
          repository: ${{ env.ORG_NAME }}/${{ env.REPO_NAME }}
          token: ${{ secrets.GH_PAT }}

      - name: Remove unwanted folders before upload
        run: |
          rm -rf .git .github

      - name: Upload all files to the server (excluding .git and .github)
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          port: ${{ secrets.PORT }}
          key: ${{ secrets.SSHKEY }}
          source: "./*"
          target: ${{ env.DEPLOY_DIR }}

      - name: Cleanup old files on the server
        uses: appleboy/ssh-action@v0.1.5
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          port: ${{ secrets.PORT }}
          key: ${{ secrets.SSHKEY }}
          script: |
            cd ${{ env.DEPLOY_DIR }}

            # Remove any leftover .git or .github folder if present on the server
            rm -rf .git .github

Explanation of the Workflow:

Workflow Trigger:

The workflow is manually triggered using workflow_dispatch. This is a good choice if you want to have more control over when the deployment happens (i.e., you trigger it manually, rather than automatically on a push or other event).

Job: build

Runs on ubuntu-latest, meaning GitHub Actions will run the job on a fresh Ubuntu runner, which is appropriate for most deployment processes.

Environment Variables:

DEPLOY_DIR: This is the directory on the server where the files will be uploaded. The value is retrieved from GitHub Secrets (${{ secrets.PROD_DIR }}).
ORG_NAME and REPO_NAME: These define which repository to clone. In this case, it's the platform-demo repository from the themeselection GitHub organization.

Steps:

Step 1: "Deploying to production" message
- This step outputs a simple message to let you know the workflow is starting the deployment.
Step 2: Checkout the repository
- This step checks out the platform-demo repository using actions/checkout. The repository is accessed using a personal access token (PAT) stored in the GitHub Secrets (${{ secrets.GH_PAT }}).
Step 3: Remove unwanted folders
- This step deletes the .git and .github directories, which are typically not needed on the production server and might contain unnecessary files or configurations.
Step 4: Upload files to the server
- This step uses the appleboy/scp-action to securely copy all the project files (excluding .git and .github) from the GitHub runner to your server. The action uses SSH to authenticate and transfer the files.
- It references secrets for the server's host, username, port, and SSH key.
Step 5: Clean up old files on the server
- This step uses appleboy/ssh-action to SSH into the server and remove any leftover .git or .github directories that may have been left behind from previous deployments. This keeps your production server clean and free from unnecessary files.

Conclusion

In this guide, we covered the basics of CI/CD and how to automate deployment for your project using GitHub Actions. With this setup, any changes you make to the codebase will automatically go through the build and deployment process, saving time and reducing the risk of human error.

Whether you’re deploying to Github or any other platform, the principles of CI/CD remain the same. By automating repetitive tasks like testing and deployment, you free up time to focus on building features and improving your product.

Remember, this is just the beginning! As you gain experience, you can extend your CI/CD pipeline to include additional features like code linting, security checks, and performance testing. But for now, enjoy the benefits of automation in your project’s deployment pipeline!

Happy coding🚀

How Do You Set Cookie Consent in Laravel? 🍪

ThemeSelection — Tue, 17 Dec 2024 13:38:44 +0000

In this tutorial, we are going to walk you through how to set up a cookie consent bar and get it working in your Laravel app. But before we dive into that, let's take a moment to understand what cookies are all about!

What are cookies?

Cookies are super important for how websites work and can improve your browsing experience! They are small files stored on your browser by websites for the betterment of your browsing experience. They can save information such as user preferences, website settings, and session details.

Besides, The cookies remain in your browser until they expire or are manually cleared. When you revisit a website, your browser sends the stored cookies back to the server, allowing the site to load with your previous preferences or settings, improving usability and personalization.

Why do we need cookie consent?

The privacy laws, the General Data Protection Regulation (GDPR) within the European Union and the California Consumer Privacy Act (CCPA) in the U.S., therefore require that websites inform users about data collection practices.

Consent ensures that the website complies with these laws, therefore avoiding penalties and ensuring transparent handling of data.

Cookies may collect personal data, for instance, browsing habits, preferences, and even location. Consent ensures that users know what data is being collected and how it will be used.

By seeking consent, the website is enabling users to determine whether they are comfortable with the data being collected. It aligns with the principle of user autonomy over personal information.

Proper information given regarding cookies and obtaining consent between the user and the website create trust. Users are likely to interact with websites which respect their privacy.

While some cookies, such as basic functionality cookies, may not need consent, others related to advertising, tracking, or analytics often do. Obtaining consent helps distinguish these cases while keeping the website user-friendly and compliant.

What is the spatie/laravel-cookie-consent package?

spatie / laravel-cookie-consent

Make your Laravel app comply with the crazy EU cookie law

Simple, customizable cookie consent message for Laravel

This package adds a simple, customizable cookie consent message to your site. When the site loads, the banner appears and lets users consent to cookies. Once consent is given, the banner hides and stays hidden.

What this package does not:

Include an option to 'Decline' all cookies, which might be required.
Block trackers and cookies before consent. You need to handle this yourself.
Include options for different consent categories like "Necessary" or "Marketing".

For more advanced cookie consent options in Laravel, consider these alternatives.

If you need an implementation of cookie consent for Filament you can evaluate this plugin:

marcogermani87/filament-cookie-consent

Support us

We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

We highly appreciate you sending us a postcard from your hometown…

View on GitHub

The spatie/laravel-cookie-consent package is a Laravel tool that adds a customizable cookie consent banner to your website, helping you comply with EU cookie laws. When users visit your site, the banner appears, allowing them to consent to cookie usage. Once consent is given, the banner hides and remains hidden on subsequent visits.

Key Features:

Customizable Consent Message: Easily modify the text and appearance of the consent banner to align with your website's design and messaging.
Automatic Handling: The package manages the display and hiding of the consent banner based on user interaction, simplifying compliance efforts.

Limitations:

No 'Decline' Option: The package does not include a 'Decline' button, which might be required for full compliance in certain jurisdictions.
Does Not Block Cookies Before Consent: It doesn't automatically block cookies or trackers before user consent; you'll need to implement this functionality yourself.
No Consent Categories: The package doesn't offer options for different consent categories like "Necessary" or "Marketing" cookies.

If you want more advanced cookie consent features, then an alternative is also available.

whitecube/laravel-cookie-consent
statikbe/laravel-cookie-consent

In this tutorial, we will utilize the spatie/laravel-cookie-consent package.

Installation

You can easily integrate this package into your existing project, or you can use the command below to create a new Laravel application.

Create a Laravel project.

composer create-project --prefer-dist laravel/laravel fresh-laravel

Now, let's proceed with the project.
```
cd fresh-laravel
```
We need to install the spatie/laravel-cookie-consent package. This package will automatically register itself upon installation.
```
composer require spatie/laravel-cookie-consent
```

You may optionally choose to publish the configuration file.

php artisan vendor:publish --provider="Spatie\\CookieConsent\\CookieConsentServiceProvider" --tag="cookie-consent-config"

The contents of the published configuration file are as follows:

return [

    /*
     * Use this setting to enable the cookie consent dialog.
     */
    'enabled' => env('COOKIE_CONSENT_ENABLED', true),

    /*
     * The name of the cookie in which we store if the user
     * has agreed to accept the conditions.
     */
    'cookie_name' => 'laravel_cookie_consent',

    /*
     * Set the cookie duration in days.  Default is 365 * 20.
     */
    'cookie_lifetime' => 365 * 20,
];

The cookie domain is defined by the 'domain' key in the config/session.php file. Ensure that you add a value for SESSION_DOMAIN in your .env file. If you are using a URL with a port, such as 'localhost:3000', this package will not function properly until you make this adjustment.

To ensure that the cookie consent bar loads on every page, include @include('cookie-consent::index') in your application's entry point or the layout file.

Usages

To enable the cookie consent bar, add the variable COOKIE_CONSENT_ENABLED to the .env file and set it to true. Once you have enabled it, a nice banner will appear like this:

When a user clicks the "Allow cookies" button to allow cookies, the laravel_cookie_consent variable is set to 1 in the browser's cookie storage. This value can be used to run or include any scripts in your application, such as Google Analytics code.

@if (!config('cookie-consent.enabled') || \\Illuminate\\Support\\Facades\\Cookie::get(config('cookie-consent.cookie_name')) !== null )
    // conditionally render code here
@endif

All you need to do is create a basic cookie consent in a Laravel application.

Developing an advanced cookie management dashboard requires consideration of a user-friendly interface that enables users to turn on or off the cookie consent bar without changing the code.

We should also implement a feature to dynamically add scripts in our Laravel application, along with an option for users to opt in or opt out of cookie consent for each specific script.

No need to worry Jetship Laravel SaaS Boilerplate already includes these basic features and more!

Besides cookie consent functionality, the Jetship Laravel SaaS Starter Kit that is built on FlyonUI offers an impressive range of features, including:

A robust and secure authentication system to protect user accounts.
Integration with two leading payment gateways: Stripe and Lemon Squeezy.
A fully managed, SEO-friendly blog for content marketing.
Comprehensive roles and permissions management for fine-grained access control.
Reusable, niche-specific UI components to accelerate development.
And many other powerful tools to streamline your SaaS development.

You can explore the live demo here. Experience the difference the Jetship Laravel starter kit makes!

Check our recently launched Shadcn/studio if you're a shadcn lover!

Shadcn/studio offers customizable variants of components, blocks, and templates. Preview, customize, and copy-paste them into your apps with ease.

Conclusion:

Integrating a cookie consent banner into your Laravel application is a vital step toward ensuring compliance with privacy regulations like GDPR and CCPA. It not only fosters user trust but also enhances transparency regarding data collection and usage practices.

By leveraging the spatie/laravel-cookie-consent package, you can implement a fully customizable and user-friendly cookie consent solution with minimal effort. This package simplifies the process of informing users about cookies, managing their preferences, and adhering to legal requirements.

Additionally, with advanced tools like Jetship Laravel SaaS Boilerplate, you can take your application’s functionality to the next level—streamlining development while ensuring compliance with built-in cookie consent and other essential features.

With the right tools and a clear implementation strategy, you’re well on your way to creating a more transparent, user-focused experience. Start building applications that not only meet regulatory standards but also enhance user trust and engagement.

Happy coding!

📣 Best Animated UI Component Libraries ⚡

ThemeSelection — Thu, 05 Dec 2024 07:14:01 +0000

10+ Trending Animated UI Component Libraries 🔥

ThemeSelection for ThemeSelection ・ Nov 6

#animation #ui #webdev #design

FlyonUI - An Open Source Tailwind CSS Component Library is Live 🚀

ThemeSelection — Tue, 01 Oct 2024 13:53:08 +0000

Hey Devs! 👋

We’re super excited to announce the launch of FlyonUI—a fully free and open-source Tailwind CSS Components library that we've been hard at work developing.

This library brings together the best of Tailwind CSS with semantic class names and powerful headless JS plugins for a seamless development experience.

And guess what? It's available on GitHub for the community to use, contribute, and improve.

A Little Backstory 💪

Our team has poured time and passion into building FlyonUI, and we're excited to offer it for free!

We’d love for you to try it out and share your feedback via GitHub issues or in the comments. Your input will help us make FlyonUI even better for everyone.

Table of Contents
Overview
Why should I use FlyonUI?
Features
Documentation
Getting Started
- Installation via NPM
- RTL (Right-to-Left) Language Support
Available Components
- Component Examples
Community
Credits
License

Overview

FlyonUI is designed to combine the best of both worlds: the aesthetic appeal of semantic classes and the powerful functionality of JS plugins.

Under the hood, it uses the strengths of:

Tailwind CSS A utility-first CSS framework that helps you build beautiful websites with ease.
DaisyUI adds component sematic class names to Tailwind CSS so you can make beautiful websites faster, easier and Maintainable.
Preline JavaScript headless & fully unstyled Tailwind plugins for accessible, responsive UI. Enhance experiences with animations, transitions, and more.

Why should I use FlyonUI?

Using Tailwind CSS alone may lead to cluttered HTML with numerous utility classes, which can be a nightmare to maintain.

Apart from that Tailwind CSS or DaisyUI doesn’t provide any interactive headless JavaScript components like accordion, overlay, dropdowns, etc…

This is where FlyonUI shines.✨

FlyonUI brings together the beauty of semantic classes and the interactive headless JavaScript plugins, offering you a powerful toolkit to build stunning, interactive user interfaces with ease.

Beautiful and Semantic Styling: Utilize comprehensive CSS components with semantic class names for a clean and readable codebase.
Interactive and Dynamic Features: Incorporate Headless JavaScript plugins for ex: Accordion, Dropdown, Overlay etc… to add interactivity and dynamic behavior to your UI components.
Efficiency and Productivity: Enjoy a faster and more efficient development process by combining the strengths of semantic classes and JS plugins.
Maintainable and Scalable: Keep your projects maintainable and scalable with a consistent coding approach and powerful JS plugins.

Features

800+ Free Components & Examples: Hundreds of component examples for all your WebApp needs that meet accessibility criteria.
Universal Framework Compatibility: Fully compatible wherever Tailwind CSS is in action, from React to Vue and beyond.
Unlimited Themes: Customize your app’s look and feel with FlyonUI’s theming capabilities. Refer to the theme section for more details.
Unstyled & Accessible Plugins: Seamlessly add unstyled, accessible plugins for functionality without sacrificing design.
Responsive & RTL support : Built with responsiveness in mind, ensuring your app looks great on all devices with RTL language support.
Free Forever: Completely free forever, open-source, and built for the community.

Documentation

For comprehensive documentation, please visit flyonui.com.

Getting Started

FlyonUI can be easily integrated into any existing Tailwind CSS project.

Installation via NPM

To use FlyonUI, ensure that you have Node.js and Tailwind CSS installed.

Install FlyonUI as a dependency:

   npm install flyonui

Include FlyonUI as a plugin in your tailwind.config.js file:

   module.exports = {
     content: ["./node_modules/flyonui/dist/js/*.js"], // Require only if you want to use FlyonUI JS component

     plugins: [
       require("flyonui"),
       require("flyonui/plugin") // Require only if you want to use FlyonUI JS component
     ]
   }

This ensures that FlyonUI's styling is applied correctly throughout your project.

If you want to include specific js component:

   module.exports = {
     content: ["./node_modules/flyonui/dist/js/accordion.js"]
   }

Include FlyonUI JavaScript in HTML To enable interactive elements, include FlyonUI's JavaScript in your HTML file, right before the closing </body> tag:

   <script src="../node_modules/flyonui/flyonui.js"></script>

For a single component, use the specific path:

   <script src="../node_modules/flyonui/dist/js/accordion.js"></script>

This script ensures that all FlyonUI interactivity is correctly applied to your elements.

RTL (Right-to-Left) Language Support

FlyonUI components offer native RTL support. Simply add the dir="rtl" attribute to your HTML element to enable this feature.

Available Components

FlyonUI provides a robust library of UI components built with Tailwind CSS utility classes, enabling fast and efficient web development. Our library includes 78+ components, from basic elements like buttons and cards to more complex third-party integrations.

Explore all components

Component Examples

Accordion	Alert	Apex Charts

Button	Card	Checkbox

Dropdown	Input	Modal

Navbar	Tabs & Pills	Tooltip

Explore all components

Community

Join the FlyonUI community to discuss the library, ask questions, and share your experiences:

📢 Follow us on Twitter
⌨️ Discuss on GitHub

Credits

We are grateful for the contributions of the open-source community, particularly:

These projects form the backbone of FalyonUI, allowing us to build a powerful and user-friendly UI kit.

License

FlyonUI is open-source software licensed under the MIT License.

📝 Read the License
📀 View THIRD_PARTY_LICENSES

Vue Cheatsheet: Simplifying Vue.js Development 🚀

ThemeSelection — Mon, 05 Feb 2024 13:13:42 +0000

Vue CheatSheet By ThemeSelection! 🚀

What is Vue CheatSheet?

It is an interactive cheatsheet of Vue, Vue Router and, Pinia. 🎊 The only Vue CheatSheet you will ever need whether you are using Vue, Vue Router & Pinia in your Vue project or starting a new Vue project.

Vue CheatSheet is aimed towards a large community of Vue users who find it difficult to search for Vue, Vue Router and Pinia.

Key Features 🛠

Comprehensive Coverage of Vue, Vue router, Pinia
Interactive search
Concise code snippet
Easily copy code snippet and use it
Open source

Contents 🤩

Vue CheatSheet	URL
Vue	https://vue-cheatsheet.themeselection.com/vue/basic.html
Vue Router	https://vue-cheatsheet.themeselection.com/vue-router/basic.html
Pinia	https://vue-cheatsheet.themeselection.com/pinia/basic.html

Contributing 📝

If you find something which doesn't make sense, or something doesn't seem right, please make a pull request and please add valid and well-reasoned explanations about your changes or comments.

Before adding a pull request, please see the contributing guidelines. You should also remember about this:

All suggestions/PR are welcome!

Credits 🤘

Name	URL
Vue	https://vuejs.org
Vue Router	https://router.vuejs.org
Pinia	https://pinia.vuejs.org
Vitepre	https://vitepress.dev
Python Cheatsheet	https://www.pythoncheatsheet.org

Vue CheatSheet is an open source project by ThemeSelection that is licensed under MIT. ThemeSelection reserves the right to change the license of future releases.

Note 📒

We request you keep ThemeSelection credit link if you share this tool or add it to a blog post.

Looking For Premium Admin Templates ??

ThemeSelection provides Selected high quality, modern design, professional and easy-to-use Free and Premium Bootstrap Admin Templates, VueJS Admin Templates, Nuxt Admmin Dashboard, Laravel Admin Templates HTML Themes and Free UI Kits to create your applications faster!.

If you want to Download Free Admin Templates then do visit ThemeSelection.

Useful Links 🔗

More products from ThemeSelection
Freebies from ThemeSelection
Blog

Social Media 😇

Twitter : https://twitter.com/Theme_Selection
Facebook : https://www.facebook.com/ThemeSelections
Pintrest : https://www.pinterest.com/themeselection/
Instagram : https://www.instagram.com/themeselection/

Open Source Vuetify NuxtJS Admin Template - Materio

ThemeSelection — Fri, 12 Jan 2024 12:45:22 +0000

Materio – Free Vuetify NuxtJS 3 Admin Template — is the latest developer-friendly 🤘🏻 & highly customizable✨ template based on Vuetify.

If you’re a developer looking for a Nuxt js Admin Template enriched with features and a highly customizable look no further than Materio Free Vuetify Vuejs admin template🤩 .

Besides, the highest industry standards are considered to bring you the very best NuxtJS admin template that is not just fast🚀and easy to use, but highly scalable. Offering ultimate convenience and flexibility, you’ll be able to build whatever application you want without any hassle.

Furthermore, you can use this one of the best innovative free admin template to create eye-catching, high-quality, and high-performing single-page applications.

Besides, your apps will be completely responsive, ensuring they’ll look stunning and function flawlessly on desktops, tablets, and mobile devices

Features:

Latest NuxtJS 3
VueJS 3, Vuetify 3
Vite 5
Utilizes Vue Router, VueUse
Available in both TypeScript & JavaScript version
1 Dashboard
Remix Icons
Basic cards
Fully Responsive Layout
Organized Folder Structure
Clean & Commented Code
Well Documented

Furthermore, this is a free NuxtJS admin template. You can use our innovative admin template to create eye-catching, high-quality, and high-performing single-page applications. Besides, your apps will be completely responsive, ensuring they’ll look stunning and function flawlessly on desktops, tablets, and mobile devices.

Incredibly versatile, the Materio Vuetify NuxtJS admin template also allows you to build any type of web application. For instance, you can create:

SaaS platforms
Project management apps
Ecommerce backends
CRM systems
Analytics apps
Banking apps
Education apps
Fitness apps & many more….

What's Included 📦

Dashboard
Account Settings
Pages
- Login
- Register
- Error
Typography
Material Design Icons
Cards
Form layouts
- Horizontal Form
- Horizontal Form with Icons
- Vertical Form
- Vertical Form with Icons
- Multiple Column
Tables

Browser Support 🖥️

Materio Vuetify VueJS Free Admin Template is built to work best in the latest desktop mobile and tablet browsers

Chrome (latest)
Firefox (latest)
Safari (latest)
Opera (latest)

Changelog 📆

Please refer to the CHANGELOG file. We will add detailed release notes to each new release.

Looking For Premium Features?🧐

Then upgrade to the Materio – Vuetify NuxtJS 3 Admin Template Pro version. It comes with many amazing features such as:

Vertical (+ vertical collapsed) & Horizontal menu
3 Skin variants w/ light/dark theme support: Default, Bordered & Semi-dark
15+ Front pages
9 pre-designed applications
5 Niche Dashboards & much more..!!

For more info click the banner above..!!