DEV Community: Navneet Singh Rajput

Stop Using Alerts Wrong: How to Actually Use the Alert Component in ScreenUI

Navneet Singh Rajput — Mon, 13 Apr 2026 06:52:15 +0000

Most developers treat alerts like an afterthought.
They throw in a red box, dump some text, and move on.
That’s not just lazy it’s bad UX.
If you’re using ScreenUI, you already have a better system available. You just need to use it the right way.

First, install it properly
ScreenUI isn’t built around copy-paste components. You install what you need using the CLI:

npx screenui-cli@latest add alert --lang ts --path src/components

This pulls the Alert component directly into your project so you can modify it, extend it, and actually own the code.

The mistake most people make
If your instinct is to use it like this:

<Alert message="Something went wrong" />

You’re thinking in the wrong direction.
ScreenUI doesn’t work like typical prop-heavy components.

How the Alert component is actually designed
ScreenUI uses a composable pattern.
That means the Alert is made up of smaller parts:

import {
  Alert,
  AlertTitle,
  AlertDescription,
} from "@/components/ui/alert";

And you build it like this:

<Alert>
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Something went wrong while processing your request.
  </AlertDescription>
</Alert>

This isn’t just a stylistic choice it’s about control.
Why this approach is better
Instead of being locked into a rigid API, you get flexibility.
You can:

Add icons
Reorder content
Inject buttons or actions
Control layout completely

Example:

<Alert variant="destructive">
  <AlertTitle>Login failed</AlertTitle>
  <AlertDescription>
    Invalid email or password.
  </AlertDescription>
</Alert>

Now the message is:

structured
readable
instantly clear

That’s what good UI should do.

Use variants to communicate meaning
An alert without context is useless.
ScreenUI supports variants like:

default
destructive (for errors)

Example:

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Unable to complete the action.
  </AlertDescription>
</Alert>

Users shouldn’t have to read everything to understand what happened the UI should tell them instantly.

Real-world usage (where this actually matters)
Alerts are most useful when tied to real logic.

{error && (
  <Alert variant="destructive">
    <AlertTitle>Submission failed</AlertTitle>
    <AlertDescription>
      {error}
    </AlertDescription>
  </Alert>
)}

This keeps your UI clean while still handling real scenarios like API failures.

Final thoughts
At the end of the day, alerts aren’t just visual elements they’re part of how your application communicates with users.
If your alerts are vague, unstructured, or overused, users either get confused or start ignoring them completely. And once that happens, even important messages lose their impact.
On the other hand, when alerts are clear, structured, and used intentionally, they quietly improve the entire experience. Users understand what’s happening without thinking twice.
ScreenUI already gives you the building blocks to do this right.
What matters is whether you treat alerts as a real part of your UI system or just another box with text in it.

If you want to explore all available variants and implementation details, you can check the official documentation here:
ScreenUI Alert Component

I Launched a UI Library, Got 100+ Downloads But AI Couldn’t Understand My Docs

Navneet Singh Rajput — Mon, 15 Dec 2025 19:43:12 +0000

I recently launched ScreenUI, an open-source UI component library + CLI for React / Next.js.

The early response was encouraging:

100+ downloads in a few days
Good engagement on Dev.to
High search impressions

But something felt off.

When I asked ChatGPT questions like
“How do I use the ScreenUI Button component?”
the answers were often incomplete or just wrong.

That was surprising - the docs looked fine to humans.

What I realized

My documentation works well for developers reading it directly.
But AI tools don’t read docs the same way humans do.

Humans:

Scroll
Infer context
Connect examples mentally

AI:

Looks for explicit structure
Needs clear signals
Breaks when important details are buried in prose

High impressions and good UX don’t automatically mean AI understands your library.

Why this matters
More developers are learning tools by asking AI first, not by opening docs.

If AI can’t accurately explain:

Component usage
Props
Installation

Your library can look unreliable - even if it’s not.
That gap between human-readable and AI-readable docs is becoming very real.

Open question
For those building libraries or design systems:
How are you making your documentation work better with AI?
Different structure? Metadata? APIs? Something else entirely?

I’m curious to hear different approaches.
website

ScreenUI Is Now Live A Modern UI Library + CLI for Next.js, React & Tailwind

Navneet Singh Rajput — Thu, 11 Dec 2025 18:38:38 +0000

ScreenUI is officially launched no longer a WIP. It now ships with 15+ production-ready components, TS/JS support, dark/light mode layouts, and a CLI that generates components directly into your project (no vendor lock-in).

What’s Inside

15+ components: Button, Accordion, Card, Toggle, File Upload, Table, Badge, and more
TS + JS support
Layout templates with built-in theme support
A fast CLI for scaffolding projects and generating components

Why It Matters

You stay in control. Everything is fully editable in your codebase - no hidden abstractions. Tailwind-first, React/Next.js friendly, and ready for real-world use.

Get Involved
Try it, break it, critique it.
Website:
Star it, use it, and tell me what should ship next.

How to Create a Stylish Loader for Your Website

Navneet Singh Rajput — Sat, 28 Sep 2024 08:49:35 +0000

Introduction

A loader (or loading spinner) enhances user experience by providing visual feedback during loading times. In this tutorial, we will create a sleek and modern loader using HTML and CSS. Let’s dive in!

What is a Loader?

A loader is an animated element that indicates content is being processed. It assures users that the application is functioning, reducing the chance of frustration during loading times.

Why Use a Loader?

Improves User Experience: It keeps users informed while waiting.
Enhances Aesthetics: A well-designed loader can make your website look more professional.
Prevents User Abandonment: By providing visual feedback, users are less likely to leave while waiting.

Step 1: Setting Up the HTML Structure
We will begin with the basic HTML structure for our loader. The following code creates a container for the loader with twelve bars.

<div class="loader"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> <div class="bar4"></div> <div class="bar5"></div> <div class="bar6"></div> <div class="bar7"></div> <div class="bar8"></div> <div class="bar9"></div> <div class="bar10"></div> <div class="bar11"></div> <div class="bar12"></div> </div>

Step 2: Styling with CSS
Next, we’ll add CSS to style the loader. Here’s the code to create a circular loader with animated bars.

`.loader {
position: relative;
width: 54px;
height: 54px;
border-radius: 10px;
}

.loader div {
width: 8%;
height: 24%;
background: rgb(128, 128, 128);
position: absolute;
left: 50%;
top: 30%;
opacity: 0;
border-radius: 50px;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
animation: fade458 1s linear infinite;
}

@keyframes fade458 {
from {
opacity: 1;
}

to {
opacity: 0.25;
}
}`

Step 3: Adding Animation
We will apply rotation and animation delays to each bar to create a dynamic loading effect.

`.loader .bar1 {
transform: rotate(0deg) translate(0, -130%);
animation-delay: 0s;
}

.loader .bar2 {
transform: rotate(30deg) translate(0, -130%);
animation-delay: -1.1s;
}

.loader .bar3 {
transform: rotate(60deg) translate(0, -130%);
animation-delay: -1s;
}

.loader .bar4 {
transform: rotate(90deg) translate(0, -130%);
animation-delay: -0.9s;
}

.loader .bar5 {
transform: rotate(120deg) translate(0, -130%);
animation-delay: -0.8s;
}

.loader .bar6 {
transform: rotate(150deg) translate(0, -130%);
animation-delay: -0.7s;
}

.loader .bar7 {
transform: rotate(180deg) translate(0, -130%);
animation-delay: -0.6s;
}

.loader .bar8 {
transform: rotate(210deg) translate(0, -130%);
animation-delay: -0.5s;
}

.loader .bar9 {
transform: rotate(240deg) translate(0, -130%);
animation-delay: -0.4s;
}

.loader .bar10 {
transform: rotate(270deg) translate(0, -130%);
animation-delay: -0.3s;
}

.loader .bar11 {
transform: rotate(300deg) translate(0, -130%);
animation-delay: -0.2s;
}

.loader .bar12 {
transform: rotate(330deg) translate(0, -130%);
animation-delay: -0.1s;
}`

Step 4: Integrating the Loader into Your Website
To use the loader in your web project, ensure you include the HTML and CSS in your files. Place the loader's HTML markup in your desired location, and the loader will appear during loading processes.

Conclusion

Creating a loader can significantly enhance your website's user experience. With simple HTML and CSS, you can build a visually appealing and functional loader. Experiment with colors and sizes to fit your website's design!