Subhadip Jana(a063)

Building a Next-Gen UI Kit Using CSS Custom Properties

Subhadip Jana — Thu, 05 Feb 2026 19:53:27 GMT

Introduction

Modern frontend development is no longer about writing isolated CSS files and static UI components.
Today’s interfaces must be scalable, theme-aware, and dynamic while maintaining performance and design consistency.

This is where CSS Custom Properties (CSS Variables) shine.

In this blog, we will build a modern UI kit architecture using CSS Custom Properties that supports:

Centralised design tokens
Live theme switching (light/dark)
Clean UI/UX separation
Minimal JavaScript
Production-ready scalability

This approach is widely used in modern SaaS dashboards, design systems, and component libraries.

What Are CSS Custom Properties?

CSS Custom Properties are runtime CSS variables that live in the browser, not during build time.

:root {
  --primary-color: #6366f1;
  --background-color: #ffffff;
}

Unlike Sass or Less variables, CSS Custom Properties:

Can be updated dynamically
Cascade like normal CSS
Can be modified using JavaScript
They are perfect for theming and design systems

Why Modern UI Kits Use Design Tokens

Design tokens are single sources of truth for UI values like:

Colors
Spacing
Typography
Border radius
Shadows

Instead of hardcoding values repeatedly, components reference tokens.

This makes UI kits:

Easier to maintain
Easier to redesign
Easier to scale

Defining Design Tokens (Foundation Layer)

We start by explaining all visual values in one place.

/* Design Tokens */
:root {
  /* Colors */
  --color-primary: #6366f1;
  --color-secondary: #22c55e;
  --color-danger: #ef4444;

  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;

  /* Text */
  --text-primary: #111827;
  --text-secondary: #6b7280;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;

  /* Shadows */
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.08);
}

UX Impact:
Changing one token updates the entire UI instantly.

Base Styles Using Tokens

Base styles ensure consistency across all components.

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: system-ui, sans-serif;
  margin: 0;
}

button {
  font-family: inherit;
}

This ensures your UI kit feels cohesive and professional.

Building Reusable UI Components

Button Component

.btn {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: none;
  background-color: var(--color-primary);
  color: white;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

Card Component

.card {
  background-color: var(--bg-secondary);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

Notice how no raw values are used — only tokens.

Creating Multiple Themes (Dark Mode)

Instead of rewriting components, we override tokens.

[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #020617;
  --text-primary: #e5e7eb;
  --text-secondary: #94a3b8;
  --color-primary: #818cf8;
}

This single block controls the entire dark theme UI.

Live Theme Switching with JavaScript

We toggle themes using a single HTML attribute.

const toggleButton = document.querySelector("#themeToggle");

toggleButton.addEventListener("click", () => {
  const currentTheme = document.documentElement.getAttribute("data-theme");
  const newTheme = currentTheme === "dark" ? "light" : "dark";

  document.documentElement.setAttribute("data-theme", newTheme);
  localStorage.setItem("theme", newTheme);
});

// Load saved theme
const savedTheme = localStorage.getItem("theme");
if (savedTheme) {
  document.documentElement.setAttribute("data-theme", savedTheme);
}

Result:
Instant UI update without reload or re-render.

Complete HTML Example (Everything in One File)

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Next-Gen UI Kittitle>

  <style>
    :root {
      --color-primary: #6366f1;
      --bg-primary: #ffffff;
      --bg-secondary: #f9fafb;
      --text-primary: #111827;
      --radius-md: 10px;
      --shadow-md: 0 10px 25px rgba(0,0,0,0.08);
    }

    [data-theme="dark"] {
      --bg-primary: #0f172a;
      --bg-secondary: #020617;
      --text-primary: #e5e7eb;
      --color-primary: #818cf8;
    }

    body {
      background: var(--bg-primary);
      color: var(--text-primary);
      font-family: system-ui, sans-serif;
      padding: 40px;
    }

    .btn {
      padding: 10px 16px;
      border-radius: var(--radius-md);
      border: none;
      background: var(--color-primary);
      color: white;
      cursor: pointer;
      box-shadow: var(--shadow-md);
    }

    .card {
      background: var(--bg-secondary);
      padding: 24px;
      margin-top: 24px;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-md);
    }
  style>
head>
<body>

  <button id="themeToggle" class="btn">Toggle Themebutton>

  <div class="card">
    <h2>Next-Gen UI Kith2>
    <p>Powered by CSS Custom Propertiesp>
  div>

  <script>
    document.getElementById("themeToggle").addEventListener("click", () => {
      const theme =
        document.documentElement.getAttribute("data-theme") === "dark"
          ? "light"
          : "dark";
      document.documentElement.setAttribute("data-theme", theme);
    });
  script>

body>
html>

UI/UX Benefits of This Architecture

No duplicated CSS
Centralised design control
Easy white-labeling
Smooth designer–developer collaboration
Framework-agnostic

Performance & Scalability

Zero layout reflow
No CSS recompilation
Native browser support
Works with React, Next.js, Vue, or Vanilla JS

This makes it production-ready and future-proof.

When to Use This UI Kit Pattern

SaaS dashboards
Portfolio systems
Design systems
Component libraries
Client white-label products

Final Thoughts

CSS Custom Properties are no longer optional in modern frontend development.
They enable UI systems that are:

Dynamic
Maintainable
Performant
Scalable

If you want to build professional, modern UI kits, this approach is essential.

🚀 Your frontend architecture just levelled up.

Micro-Interactions in Creative Frontend Web Development

Subhadip Jana — Tue, 20 Jan 2026 18:00:38 GMT

Have you ever noticed the small interactions you have with a digital device, like clicking a button or swiping an icon? These are called microinteractions, and they are the building blocks of a great user experience. Microinteractions can delight your users by providing those 'little touches' that make your designs stand out. These dynamic interactions can have a significant impact, so it's important to understand them fully. That's where we come in! In this post, we'll examine what microinteractions are, why they're so important, and share some actionable advice on when (and how) to incorporate them into your designs. What is a microinteraction?

At its core, a microinteraction is a small interaction between a user and a digital product that serves a specific purpose. Microinteractions usually occur when a user triggers an action that results in a response.

Think about hitting the “like” button on social media platforms. The button might change color or move up and down. This not only confirms that your action was recorded but also shows other users that the content is popular.

Even though they might seem small, microinteractions improve the overall user experience by providing feedback, informing users of their actions (or even influencing their behaviors), and bringing the interface to life with dynamic animation. With clear, accessible, and intuitive interactions, users are more likely to feel a sense of accomplishment and engage with the product.

The four components of microinteractions

Microinteractions consist of four components: the trigger, the rules, the feedback, and the loops and modes. Let’s take a closer look at each.

1. Trigger

The trigger is the moment when the microinteraction begins. There are two types of triggers:

Explicit, which are user-initiated (like hitting the like button, as we explored in the previous section), and
Implicit, which are system-initiated—like displaying a notification or automatically updating information based on a predefined condition.

The key to creating effective triggers is making them clear, visible, and intuitive, so users understand what action they need to take to initiate the interaction.

2. Rules

Rules are a set of conditions that determine how the interaction will behave. They guide how the system responds to the trigger, including displaying a message, playing a sound, animating an element, or updating data. The rules also define the interaction constraints (i.e., what the users can or can’t do) and provide helpful hints when those constraints are met—for example, an error message indicating that a password requires special characters.

3. Feedback

Feedback provides users with a visual or auditory response to their actions—informing users about the outcome or status of their action and confirming their input has been recognised. Feedback can take a range of different forms, from visual cues like changes in colour or shape, to progress indicators or sound effects.

4. Loops and modes

Loops and modes define what happens during and after the microinteraction. Loops refer to the continuous feedback or animation that occurs while the microinteraction is taking place, giving users a sense of continuity and progress.

Modes, on the other hand, define the different states or variations of a microinteraction that can exist depending on the context or user behaviour. Together, loops and modes help to create a more dynamic and personalised experience.

What are the benefits of using microinteractions? How can they improve your UI?

As we’ve explored so far, microinteractions are a small but mighty addition to any user interface—bringing the design to life and enhancing the overall user experience tenfold. Let’s explore five benefits of incorporating microinteractions into your upcoming project.

Increased user engagement

Through responsive, dynamic animations, microinteractions provide instant feedback, which brings the interface to life. They create a sense of direct manipulation and engagement, which keeps users engaged—and encourages them to explore the UI further.

Clear communication and feedback

Microinteractions help convey information concisely and intuitively, reducing ambiguity and keeping users in the loop. For example, a loading spinner during a file upload process assures users their action is being processed. By providing real-time feedback, microinteractions improve transparency across the board (one of the key pillars of good UX).

Guidance and learning

Microinteractions can guide users, reinforce their actions, and help them understand how to navigate the UI effectively. By providing visual cues and subtle animations, they shape user behaviour and teach them the expected workflow. For example, a subtle highlight effect when hovering over a clickable element lets the user know it’s interactive—which encourages them to interact.

Enhanced emotional connection

Despite being…well, micro—microinteractions can evoke emotional responses from users. Whether it’s subtle animations, delightful transitions, or playful interactions, microinteractions can add personality and character to your UI, making the interface feel more relatable and fostering a sense of connection and empathy with your audience.

Error prevention

By providing immediate and contextual feedback, microinteractions keep user errors to a minimum and help users quickly resolve issues when they do happen. For example, when users enter invalid data into a form, a microinteraction could highlight the problematic input in red, quickly helping users identify and correct the error. This also reduces users’ frustration and friction, resulting in a more seamless user experience overall.

What are the different types of microinteractions? (With examples)

In reality, there’s no set or exhaustive list of microinteractions. Each microinteraction looks different, and as technology (and UI design) evolves, new types of microinteractions crop up. Despite this, there are a few core types of microinteractions you’ll recognise from the interfaces you know and love.

Tap effects refer to animations or visual changes when users tap on a clickable element (like a button). They provide immediate feedback to acknowledge the user’s action.

[Via WebArtDevelopers]

Swipe effects involve animations or transitions that respond to a swipe gesture, typically used when navigating through screens or images to guide users through the content

[Via Cem Kazim]

Tap and hold effects happen when a user taps and holds on an element, triggering a specific action or revealing additional options. These are particularly useful for showing hidden functionalities or providing access to secondary actions.

[Via Dribbble]

Scroll-into-view microinteractions come into play when users scroll through a page or list. These animations can bring elements into view or include subtle transitions that indicate the user’s position within the content.
Pull-to-refresh microinteractions allow users to refresh the content by pulling or dragging the screen downward—providing a tactile and visually engaging way to update information.

[Via Dribbble]

Progress bars visually represent task completion or the loading status. They provide users with a clear sense of progress and reassure them that their action is being processed.

[Via Dribbble]

Microinteractions related to errors occur when users make mistakes or encounter issues. These interactions can include visual cues, animations, or error messages that highlight the problem and guide users toward resolving it.

[Via Justinmind]

Sound-based microinteractions involve using audio feedback to enhance user interactions—including subtle sounds that accompany actions like button clicks or notifications.
Button state changes visually differentiate a button’s states, depending on whether it’s active, hovered, or disabled. These interactions help users understand the button’s current state.

[Via Cloud Four]

Hover effects are the result of users moving the cursor over interactive elements. These microinteractions can include animations, colour changes, or tooltips that provide additional information or context.

[Via CodeMyUI]

System feedback microinteractions provide visual or audio feedback related to system actions or processes, like saving, deleting, or syncing data.
Page transitions occur when users navigate between different screens or pages. They can involve animations, fades, or sliding effects.

[Via Dribbble]

How to Design Microinteractions

To seamlessly integrate microinteractions into your interface, follow these five practical steps:

Identify the Interaction Point
Begin by pinpointing the specific interaction point within the user interface where the microinteraction will occur. This could be a button, form field, notification, or any element where user input triggers a response. Clearly define the purpose and desired outcome of the microinteraction once the interaction point is identified.
Define the User Flow
Consider the steps users will take before and after the interaction. Conduct user research to understand the context, user goals, and potential challenges. This step is crucial for understanding the role of microinteractions within the user experience and how they assist users in completing actions.
Sketch the Interaction
Create quick sketches or wireframes to visualize how the microinteraction will function. Consider the motion, animations, and visual cues that will communicate the interaction to the user. Iterate and refine your sketches until satisfied.
Prototype and Test
Bring your microinteraction to life by prototyping it using design tools like Adobe XD, Figma, or Principle. These tools offer advanced prototyping capabilities to create dynamic, interactive prototypes that simulate the microinteraction. Test the prototype with real users and refine it based on their feedback.
Implement the Microinteraction
Once the design is validated through user testing, integrate the microinteraction into the final product. Collaborate with developers on the specifications and assets required to ensure the interaction behaves as intended.

Using Microinteractions in UI Design: Tips and Best Practices

To create effective microinteractions, consider these best practices:

Keep it Simple and Purposeful:
Microinteractions should be lightweight and unobtrusive, avoiding unnecessary complexity or excessive animations. Focus on delivering a clear and concise message that guides users without causing confusion.
Pay Attention to Timing and Feedback:
Timing is crucial for effective microinteractions. Consider the speed, duration, and sequencing to ensure they feel natural and intuitive.
Stay On-Brand:
Consistency is key in microinteractions, helping establish familiarity and build trust with users. Maintain a cohesive design language, ensuring colors, typography, and motion patterns align with the rest of your interface.

Final Thoughts

Microinteractions, from small touches that enhance an experience to essential feedback loops that guide users, can transform your design and create a more enriching user experience. By incorporating microinteractions, you can help users complete tasks more efficiently, leading to better engagement and higher revenue. When designed well, microinteractions can also have a greater emotional impact, helping users connect more deeply with your product or service.

Architecting a Scalable Component Library with Shadcn/ui

Subhadip Jana — Tue, 20 Jan 2026 11:57:55 GMT

In the modern frontend landscape, the debate between "building from scratch" vs. "using a library" has shifted. We now have a third, more powerful option: Headless UI wrapped in your own design system.

Shadcn/ui has emerged as the gold standard for this approach. Unlike Material UI or Bootstrap, it is not a component library you download together as an npm package. It is a set of reusable components that you can copy and paste into your apps.

Why "Copy-Paste" is the Future

The brilliance of Shadcn/ui lies in ownership. When you install a component, the code lives in your components/ folder.

Total Customization: You aren't overriding weird internal CSS classes. You are editing Tailwind classes directly in the component file.
No Vendor Lock-in: If the library stops being maintained, your code still works. You own it.
Accessibility First: It leverages Radix UI primitives, ensuring your interactive elements (dialogs, dropdowns, tooltips) are WAI-ARIA compliant out of the box.

Setting Up the Foundation

Building a library starts with a solid foundation. You need a design token system—usually handled by Tailwind CSS—and a way to manage component variants.

Enter cva (Class Variance Authority).

import { cva, type VariantProps } from "class-variance-authority"

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

This pattern allows you to create typed, consistent APIs for your components that developers will love using.

The Architecture of a Component

When architecting your library, follow the Composition Pattern. Avoid giant "god components" that take 50 props. Instead, break them down.

Take the Card component for example. Instead of one , Shadcn encourages:


  
    Notification
    You have 3 unread messages.
  
  
    Your subscription expires soon...

This flexibility allows you to insert anything anywhere, without the library author needing to predict your specific use case.

Managing Theming

One of the strongest aspects of this stack is the separation of logic and styling using CSS variables. Your globals.css defines the meaning of colors, not just the hex codes.

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
}

By binding Tailwind config to these variables, you not only get instant Dark Mode support but also the ability to re-theme your entire app (or specific sub-sections) just by changing a few CSS variables on a wrapper div.

Conclusion

Building a component library today isn't about writing complex DOM logic from scratch; it's about curating a system. By combining the accessibility of Radix, the styling engine of Tailwind, and the copy-paste philosophy of Shadcn, you get a system that is robust, accessible, and infinitely scalable.

It’s not just a UI library; it’s a workflow upgrade.

The Art of Invisible Design: 5 Fundamentals Every Beginner Must Know

Subhadip Jana — Tue, 20 Jan 2026 11:29:20 GMT

Great design often feels invisible. When an app "just works," it's usually because the designer mastered the fundamental principles that guide human perception. For beginners, the world of UI/UX can feel overwhelming, but it really boils down to a few core concepts.

Here are 5 fundamental pillars of UI design that will instantly elevate your work.

1. Visual Hierarchy

Hierarchy is how we guide the user's eye across the screen. It tells them what is important and in what order they should process information.

You can establish hierarchy through:

Size: larger elements demand more attention.
Color: Bright or distinct colors stand out against neutral backgrounds.
Position: Objects at the top-left (for LTR languages) are seen first.

"If everything is bold, nothing is bold."

2. The Power of Whitespace

Beginners often fear empty space, trying to fill every pixel with content. Experienced designers know that whitespace (or negative space) is an active design element, not just a background.

Why it matters:

Reduces Cognitive Load: Giving content room to breathe makes it easier to scan.
Creates Grouping: Space defines relationships better than lines or boxes. Elements close together are perceived as related (Law of Proximity).

3. Consistency & Patterns

Consistency builds trust. If a "Submit" button is blue and rounded on one page, it shouldn't be red and square on the next.

Types of Consistency:

Visual: Fonts, colors, button styles.
Functional: Behaviours (e.g., clicking a card always opens a modal).
Internal: Consistency within your product.
External: Consistency with established industry standards (Jakob's Law).

Jakob's Law: Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

4. Contrast and Accessibility

Contrast is key for readability. It ensures that text is legible and interactive elements are distinguishable.

Use tools like WebAIM's Contrast Checker to ensure your text meets WCAG standards. Good contrast isn't just for visually impaired users; it helps everyone use your app in direct sunlight or on low-quality screens.

5. Typography is UI

90% of the web is text. If you can style type well, you're 90% of the way to a good UI.

Key tips:

Limit Typefaces: Stick to 1 or 2 families (e.g., a Sans-serif for headers and a Serif for body).
Line Height: For body text, a line-height of 1.5 (150%) is a good starting point for readability.
Line Length: Keep lines between 45-75 characters to avoid eye fatigue.

Conclusion

Design is an iterative process. You won't master these overnight, but by consciously applying these 5 principles—Hierarchy, Spacing, Consistency, Contrast, and Typography—you'll notice an immediate improvement in the quality of your interfaces.

Start small, copy designs you admire to understand how they work, and keep building!