
It’s time.

I think I might stop working on [@HextaUI](https://hextaui.com)

Why?

Well, it’s been almost 4 years of building multiple variants and design systems for HextaUI. Honestly, there are already thousands of better libraries out there that you can use.

HextaUI started as a personal project that unexpectedly took off in the community. But with technologies evolving so quickly, maintaining everything by myself has become far too time-consuming. On top of that, I don’t have the budget to keep supporting it, lol.

I’m not going to delete it completely from the internet but I will be working on it a lot less moving forward.

Sometimes, to move forward, we have to let go.

Thanks to everyone who supported me because of that I was able to build and maintain HextaUI for almost 4 years because of you!

Signing off for now. Much love. ❤️

Final Goodbye to HextaUI


Ever wanted to share your GitHub repo with a simple `/github` link instead of the full GitHub URL? Here's how to set up clean redirects in Next.js that make sharing your projects easier.

---

## Why Use Redirects?

Instead of sharing long URLs like `https://github.com/preetsuthar17/ikiform`, you can create short, memorable links:

- `yoursite.com/github` → Your main GitHub profile
- `yoursite.com/discord` → Your Discord server
- `yoursite.com/feedback` → Your feedback form

These short links are:
- **Easier to remember** and share
- **Professional looking** in marketing materials
- **Trackable** if you add analytics
- **Changeable** without updating everywhere

---

## How Redirects Work in Next.js

Next.js has built-in redirect functionality through the `next.config.js` file. When someone visits your redirect URL, Next.js automatically sends them to the destination URL with a proper HTTP redirect.

---

## Step-by-Step Setup

### 1. Open Your Next.js Config File

Find your `next.config.js` or `next.config.mjs` file in your project root. If you don't have one, create it:

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Your config here
}

module.exports = nextConfig
```

For TypeScript projects, use:

```ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Your config here
};

export default nextConfig;
```

### 2. Add the Redirects Function

Add an `async redirects()` function to your config:

```ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async redirects() {
    return [
      {
        source: '/github',
        destination: 'https://github.com/yourusername/yourproject',
        permanent: false, 
      },
    ]
  },
};

export default nextConfig;
```

### 3. Add Multiple Redirects

You can add as many redirects as you need:

```ts
async redirects() {
  return [
    {
      source: '/github',
      destination: 'https://github.com/preetsuthar17/ikiform',
      permanent: false, 
    },
    {
      source: '/discord',
      destination: 'https://discord.gg/jM5BgDMaGX',
      permanent: false, 
    },
    {
      source: '/feedback',
      destination: 'https://www.ikiform.com/f/feedback-form-ag334n',
      permanent: false, 
    },
    {
      source: '/feature-request',
      destination: 'https://www.ikiform.com/f/feature-request-form-zo0tg5',
      permanent: false, 
    },
  ]
},
```

### 4. Restart Your Development Server

After making changes to `next.config.js`, restart your dev server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

---

## Understanding the Options

### Source and Destination

- **`source`**: The path users visit on your site (`/github`)
- **`destination`**: Where they get redirected (`https://github.com/username/repo`)

### Permanent vs Temporary

- **`permanent: false`**: Creates a 307 redirect (temporary)
- **`permanent: true`**: Creates a 308 redirect (permanent)

Use `permanent: false` for most cases—it's safer and gives you flexibility to change destinations later.

### Advanced Pattern Matching

You can use patterns for dynamic redirects:

```ts
{
  source: '/github/:path*',
  destination: 'https://github.com/yourusername/:path*',
  permanent: false,
}
```

This would redirect `/github/issues` to `https://github.com/yourusername/issues`.

---

## Best Practices

### 1. Keep It Simple

Use clear, memorable paths:
- ✅ `/github`, `/discord`, `/docs`
- ❌ `/gh`, `/dc`, `/documentation-site`

### 2. Use Consistent Naming

If you have multiple projects, keep the pattern consistent:
- `/project1-github`
- `/project2-github`

### 3. Plan for Analytics

Consider adding UTM parameters to track redirect usage:

```ts
{
  source: '/github',
  destination: 'https://github.com/username/repo?utm_source=website&utm_medium=redirect',
  permanent: false,
}
```

### 4. Test Your Redirects

Always test redirects after deployment:

```bash
curl -I https://yoursite.com/github
```

Look for the `Location` header to confirm it's working.

---

## Common Use Cases

### Social Links

```ts
{
  source: '/twitter',
  destination: 'https://twitter.com/yourusername',
  permanent: false,
},
{
  source: '/linkedin',
  destination: 'https://linkedin.com/in/yourusername',
  permanent: false,
}
```

### Project Resources

```ts
{
  source: '/docs',
  destination: 'https://docs.yourproject.com',
  permanent: false,
},
{
  source: '/demo',
  destination: 'https://demo.yourproject.com',
  permanent: false,
}
```

### Support Channels

```ts
{
  source: '/support',
  destination: 'mailto:support@yourproject.com',
  permanent: false,
},
{
  source: '/bug-report',
  destination: 'https://github.com/username/repo/issues/new',
  permanent: false,
}
```

---

## Deployment Notes

Redirects work automatically when you deploy to:
- **Vercel** (built-in support)
- **Netlify** (via `_redirects` file, but Next.js handles it)
- **Other platforms** that support Next.js

No additional configuration needed—just deploy your updated `next.config.js`.

---

## Conclusion

Setting up redirects in Next.js is simple but powerful. With just a few lines in your config file, you can create professional, memorable links that make sharing your projects easier.

Start with your most important links like `/github` and `/discord`, then add more as needed. Your users (and your marketing materials) will thank you for the cleaner URLs.


How to setup redirects in Next.js


You don’t need to be a genius. You just need to keep going.

Here’s the simple, no-fluff way to get your first 100 users:

1. **Launch everywhere** – Product Hunt, DevHunt, BetaList, Peerlist, AppSumo, Indie Hackers, Dailypings. If a site lets you list your product, put it there.
2. **Post on social daily** – One post won’t do much. Show up every day for 100 days. Study what works, adjust, and keep going.
3. **Watch your competitors** – See where they’re listed. Add your product to those same places. Do it by hand or use a tool.
4. **Use AI + SEO** – Create blog posts with ChatGPT. A set of 50 well-made posts can drive serious traffic. Aim for a domain rating of 15 or more.
5. **Run ads** – Try X, Google, Facebook, even Bing. Test and improve once, then let them run.
6. **Cold DMs and replies** – Find your audience. Keep it short and useful. One sentence pitch. Be helpful, not spammy.

The internet rewards persistence. No tricks. Just steady, consistent work. First 100 users, then 1000.




How to get first 100 users


A few years ago, when I was working as a freelance web developer, there were many projects that used repetitive layouts and designs.

That's when I built my own collection of basic UI components, such as buttons and others. At that time, I was using CSS, so I styled my components using CSS. Later, I decided to open-source these components, and that's when I created HextaUI.

After a few months, I found out about Tailwind CSS, so I decided to recreate all components with better design, modularity, and accessibility. This time, I also added animated components, not just base components. After building and launching, I left it and went on a break. (It didn't get any response because I didn't know marketing.)

[Old HextaUI](https://eloquent-belekoy-8b3fc1.netlify.app/)

Two months ago, I decided to rebuild the entire project—but this time, I wanted to scale it and make it stand out, because there's a lot of competition. So I rebuilt all base components, made them the latest versions, and gave it my all.

[Latest HextaUI](https://hextaui.com/)

This time, it got a great response, in fact, it crossed 50,000 visitors in just 72 hours.

Looking at the response and demand, I created pre-built blocks using the base components and launched them at a minimal price. That also blew up and crossed more than 10 sales and exceeded $500 in revenue in just 24 hours. I was selling pre-built website blocks and UI components.

What I learned: the product matters the most. No matter how many competitors are out there, people still buy good products. If you think, "People are already building what I'm building," or "There are better options," then build something better. Make something specific. Niche down within that same niche.

Just build it.


Rebuilding an old project paid off, literally!


A month or two ago, I started working on a new startup called "Ikiform." It's an AI-native, open-source alternative to Google Forms.

Why I built this?

Well, if you've watched my previous videos, you know that I run a web design agency too. I rebranded my agency, and I thought it would be a good idea to add an inquiry form directly to the website.

However, matching my website's design and aesthetics, Google Forms was too unprofessional for me. As for other options, like Typeform, it was too expensive, considering the amount of inquiries I was getting.

So, that's why I built my own simple forms. When I published them, people asked me what forms these were and stuff like that. It attracted quite a lot of users, and many people booked a call. It almost doubled my leads and conversion rate.

So, I decided to create a professional and production-ready app for forms and called it an AI-native Google Forms alternative.

It took me a while to figure out how I wanted things to work and how users would love to use my forms app.

In just a month, I finished working on Ikiform and launched it on Twitter with a funny launch video.

The launch went smoothly, with many new signups and demo users, and the cherry on top was that we also made a few sales!

I followed Marc's advice and tried to share a simple and short story on Y Combinator News.

And for the first time, it blew up. I got a crazy ton of readers, a ton of upvotes, and so many comments.

I never thought that my post, which I literally took 2 minutes to write, would blow up like this, and within just 24 hours, it got me 8,000 visitors on the Ikiform website and a few more sales!

[Ikiform on Y Combinator News](https://news.ycombinator.com/item?id=44518898?ref=preetsuthar.me)

Although it was really nice to see new signups, new sales, traffic, and everything, readers still criticized me on Y Combinator.

But as they say, criticism is good, so I took it in a good way. I read every single comment and implemented all the improvements and changes.

[Ikiform](https://ikiform.com?ref=preetsuthar.me)

So, that's the story of how I got 10,000+ visitors in just 24 hours after launching on Y Combinator News.


How I got 10k+ visitors in just 24 hours


> **TL;DR**  
> Stop storing images in `/public`. Compress to WebP, host on **UploadThing** (5 GB free, unlimited bandwidth), and link the CDN URL in `<Image />`.

---

### The hidden cost of the `/public` folder

| **Meter**                                                    | **Pro/Enterprise Extra**    | **Real-world pain**                                                                                      |
| ------------------------------------------------------------ | --------------------------- | -------------------------------------------------------------------------------------------------------- |
| **Image transformations**(every cache **MISS** or **STALE**) | **$0.05–$0.08 / 1 000**     | A 2 MB hero image, 3 viewports, 3 formats = 9 transformations per visitor. 1 112 visitors = $0.50 extra. |
| **Image cache reads**(each 8 KB chunk)                       | **$0.40–$0.64 / 1 000 000** | Same hero image (250 KB) served in Beijing → 32 read units. 100 k hits = $0.20 extra.                    |
| **Image cache writes**(each 8 KB chunk)                      | **$4.00–$6.40 / 1 000 000** | Every new variant (size/format) triggers a write. 10 new variants × 50 k users = $2.00+ extra.           |

> **Plus** the usual **Fast Data Transfer** & **Edge Requests** you already pay for when the image is delivered.

---

### Hobby overage?

- **No charge**, but new images instantly return **HTTP 402** (payment required) and your `<Image>` falls back to the `alt` text.
- Previously optimized images keep working.

---

### Pro trial overage?

- **Trial ends** on the spot—you’re forced to upgrade or lose optimization.

---

### Step-by-step: free, fast, future-proof images

#### 1. Compress & convert to WebP

| Tool              | One-liner                                               |
| ----------------- | ------------------------------------------------------- |
| **Squoosh** (GUI) | Drag → choose _WebP_ → quality 80 % → download `.webp`. |
| **TinyPNG** (GUI) | Drag → auto WebP → download.                            |
| **CLI** (cwebp)   | `cwebp -q 80 in.jpg -o out.webp`                        |

Typical savings: **30–50 % smaller** than JPEG/PNG with no visible loss.

#### 2. Host on UploadThing (no code)

1. [Create account](https://uploadthing.com) (free tier 2 GB storage, unlimited egress).
2. **Upload Files** → drag your `.webp`.
3. Click **Copy URL** → `https://utfs.io/f/abc123def456.webp`.

#### 3. Drop the URL into Next.js

```jsx
import Image from "next/image";

export default function Hero() {
  return (
    <Image
      src="https://utfs.io/f/abc123def456.webp"
      alt="Hero section"
      width={1200}
      height={630}
      priority
    />
  );
}
```

No extra config—UploadThing already sets proper `Cache-Control` headers.

#### 4. Quick checklist

- ✅ Never commit raw PNG/JPG to `/public`.
- ✅ Always compress & convert first.
- ✅ Replace image? Re-upload, swap URL. Old links remain cached worldwide.

---

### Why this works

| Metric                 | Before (`/public`)     | After (UploadThing)          |
| ---------------------- | ---------------------- | ---------------------------- |
| **Bandwidth bill**     | $0.05 - $0.0812 per 1K | **$0**                       |
| **Global CDN**         | Vercel edge (static)   | UploadThing edge (optimized) |
| **Scalability**        | Add GBs → $$           | Add files → free             |
| **Format negotiation** | Manual                 | Automatic (WebP/AVIF)        |

---

### Bonus tips

- **Lazy-load below-the-fold images**

```jsx
loading = "lazy";
```

- **Responsive sizing**

```jsx
sizes = "(max-width: 768px) 100vw, 50vw";
```

- **Monitor usage**
  UploadThing dashboard shows total egress—set a Slack alert if you’re close to any paid tier.

---

### Want to dig deeper?

- [Vercel Bandwidth Pricing](https://vercel.com/pricing)
- [UploadThing Docs](https://docs.uploadthing.com)
- [Next.js Image Optimization](https://nextjs.org/docs/app/getting-started/images)


Optimize images for vercel hosting


Add a button that instantly opens the current page in ChatGPT, Claude, or T3 Chat so users can ask questions about it—without copying or pasting a thing.

---

## Why Add This Button?

Sometimes your users get stuck. This button helps them get instant, smart answers from AI using your page content.

It’s especially useful for:

- Code tutorials and examples
- Troubleshooting guides
- Complex product features
- Learning resources
- Any help page where a user might need clarification

Instead of making users explain the page to ChatGPT, this button does it for them.

---

## Problems with Traditional Help

Old-school help systems don’t always cut it:

- Contact forms take time
- FAQs don’t cover everything
- Search often misses the point
- Live chat needs real people
- Users want help _now_

This button solves all that by giving users direct, AI-powered assistance based on the exact page they're on.

---

## How It Works

The idea is simple: We create a button that links to ChatGPT, Claude, and T3 with the current page's URL and title included in the query. These tools then know what the user wants help with.

---

## Step-by-Step Guide

### 1. Create the Button Component

Create a file called `AskAIButton.jsx` in your `components` folder:

```jsx
"use client";

import { ChevronDown, ExternalLinkIcon, MessageCircleIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export default function AskAIButton({ slug }) {
  const currentUrl = typeof window !== "undefined" ? window.location.href : "";
  const pageTitle = typeof window !== "undefined" ? document.title : "";

  const q = `Please read the documentation from ${currentUrl} (titled: "${pageTitle}"). I want to discuss or get help with it.`;

  const gpt = `https://chatgpt.com/?${new URLSearchParams({
    hints: "search",
    q,
  })}`;
  const claude = `https://claude.ai/new?${new URLSearchParams({ q })}`;
  const t3 = `https://t3.chat/new?${new URLSearchParams({ q })}`;

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="secondary">
          <MessageCircleIcon className="size-4" />
          Ask AI
          <ChevronDown className="size-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuItem asChild>
          <a
            href={gpt}
            target="_blank"
            rel="noreferrer noopener"
            className="flex gap-2"
          >
            ChatGPT <ExternalLinkIcon className="size-4 ms-auto" />
          </a>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <a
            href={claude}
            target="_blank"
            rel="noreferrer noopener"
            className="flex gap-2"
          >
            Claude <ExternalLinkIcon className="size-4 ms-auto" />
          </a>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <a
            href={t3}
            target="_blank"
            rel="noreferrer noopener"
            className="flex gap-2"
          >
            T3 Chat <ExternalLinkIcon className="size-4 ms-auto" />
          </a>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
```

> **Note**: This example uses UI components from [HextaUI](https://hextaui.com?ref=preetsuthar.me), but you can replace them with any UI library or plain HTML.

---

### 2. Add the Button to Your Page

#### For a Static Page

```jsx
import AskAIButton from "@/components/AskAIButton";

export default function HelpPage() {
  return (
    <div>
      <h1>Help Page</h1>
      <AskAIButton />
    </div>
  );
}
```

#### For a Dynamic Blog Page (e.g., `[slug].jsx`)

```jsx
import AskAIButton from "@/components/AskAIButton";

export default function BlogPost({ params }) {
  return (
    <div>
      <h1>Blog Post</h1>
      <AskAIButton slug={params.slug} />
    </div>
  );
}
```

---

## Conclusion

This small addition can dramatically improve your help experience.

- Makes help pages interactive
- Reduces user frustration
- Integrates AI tools seamlessly
- Helps users get the answers they need fast


Add an Ask AI Button in Next.js


## What is llms.txt?

The `llms.txt` file helps artificial intelligence (AI) systems better understand your website by providing a clear outline of your site's structure and content, typically using Markdown syntax. It lists important page URLs and describes their content, making it easier for AI to interpret your site.

Having an accurate `llms.txt` is important—without it, AI tools may struggle to navigate your website or recognize the relationships between different pages. This can decrease your site's visibility in AI-driven search results.

While `llms.txt` is similar to `robots.txt` in that both assist web crawlers, they serve distinct roles. `robots.txt` controls crawler access, whereas `llms.txt` focuses on describing your site's content for AI understanding.

## How to Create & Generate Content for llms.txt

The first step is to create a new file named `llms.txt` in the root directory of your website.

To generate content for `llms.txt`, simply head over to [https://llmstxt.firecrawl.dev/](https://llmstxt.firecrawl.dev/).

![preview](https://i.ibb.co/ccQts2Kn/image.png)

Click on `Enter Firecrawl API key` to enter your Firecrawl API key.

If you don't have one, go to the [https://firecrawl.dev](https://firecrawl.dev) website, create a free account, and find your API key.

Once you get the API key, paste it into the llms.txt generator website and hit save.

![preview](https://i.ibb.co/cXr7jDBJ/image.png)

Here, you can enter your website URL, and it will automatically generate the content for you. You can also edit the content as per your requirements.

Now, just enter the URL of the website you want to generate the `llms.txt` for, and click on `Generate`.

This will automatically generate the content for your `llms.txt` file, so you can simply copy and paste it into your `llms.txt` file.

![preview](https://i.ibb.co/dshptBL9/image.png)

After generating the content, simply copy it and paste it into your `llms.txt` file.

Once done, deploy your website and you will find your `llms.txt` file at `https://yourwebsite.com/llms.txt`.

Here's an example: [https://hextaui.com/llms.txt](https://hextaui.com/llms.txt)

Adding `llms.txt` to your website is a straightforward process that can significantly enhance how AI systems understand and interact with your content. By following the steps outlined above, you can ensure that your site is better equipped for AI-driven applications and search results.

For more information on `llms.txt`, you can refer to the following resources:

- [The /llms.txt file](https://llmstxt.org/)
- [Firecrawl Documentation](https://docs.firecrawl.dev/)


Add llms.txt to your website


Spam bot attacks on forms can be a nuisance, leading to spam submissions and potential security risks. Here's a simple method to prevent spam bot attacks in form submissions using a hidden field.

### Step 1: Add a Hidden Field

Add a hidden field to your form. This field should be invisible to users but visible to bots. For example:

```jsx
const [honey, setHoney] = useState("");

<input
  type="text"
  value={honey}
  onChange={(e) => setHoney(e.target.value)}
  tabIndex="-1"
  area-hidden="true"
/>;
```

### Step 2: Validate the Hidden Field

When processing the form submission, check if the hidden field is empty. If it's not empty, it's likely a bot submission.

```jsx
const handleSubmit = (e) => {
  e.preventDefault();

  if (honey) {
    // This is a bot submission
    console.log("Spam bot detected!");
    return;
  }

  // Process the form submission
  console.log("Form submitted successfully!");
};
```

### Complete Example

```jsx
import React, { useState } from "react";

const Form = () => {
  const [honey, setHoney] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    if (honey) {
      console.log("Spam bot detected!");
      return;
    }

    console.log("Form submitted successfully!");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={honey}
        onChange={(e) => setHoney(e.target.value)}
        tabIndex="-1"
        area-hidden="true"
      />
      <button type="submit">Submit</button>
    </form>
  );
};
```

Actual users won't see the hidden field, but bots will fill it out, allowing you to filter out spam submissions easily. This method is simple and effective for preventing spam bot attacks in form submissions.

Read the actual Twitter thread: [Prevent spam bot attacks in form submissions — Twitter thread](https://x.com/preetsuthar17/status/1926188828169015371)


Prevent Spam Bot Attacks in Form Submissions


This is the type of badge you can add to the filename in Fumadocs.

![image](https://pbs.twimg.com/media/GqGozTTbAAAj1ay?format=png&name=360x360)

It is very easy to add a badge to the filename in Fumadocs.

first step is to extend the frontmatter schema.

go to `source.config.ts` file in root folder of fumadocs project and add the following code.

```ts
export const docs = defineDocs({
  docs: {
    schema: frontmatterSchema.extend({
      new: z.boolean().default(false),
    }),
  },
});
```

now we can basically add the frontmatter prop in `lib/source.ts` file.

> Make sure to rename the `lib/source.ts` to `lib/source.tsx`

```ts
export const source = loader({
  baseUrl: "/docs",
  source: docs.toFumadocsSource(),
  pageTree: {
    attachFile(node, file) {
      if (!file) return node;

      const data = file.data.data as {
        new: boolean;
      };

      // JSX nodes are allowed
      if (data.new) {
        node.name = (
          <>
            {node.name}
            <div className="bg-fd-primary">NEW</div>
          </>
        );
      }

      return node;
    },
  },
});
```

now to use this we can just use `new` prop in the frontmatter.

```plaintext
---
title: File Upload
description: Animated and interactive file upload component.
new: true
---
```

final result would be like this.

![image](https://pbs.twimg.com/media/GqGozTTbAAAj1ay?format=png&name=360x360)


Add a badge to the filename in Fumadocs


When linking two pages in a Next.js application, the built-in `<Link>` component allows for seamless client-side navigation. Instead of triggering a full page reload like traditional websites, Next.js uses frontend routing to display the new page instantly, making for a faster user experience.

But that’s not all—Next.js also prefetches linked pages automatically. As soon as a `<Link>` element enters the viewport (i.e., becomes visible on screen), Next.js begins preloading the linked page in the background—provided it’s an internal link within your site. This makes navigation nearly instant when users click the link.

However, this prefetching behavior only works in **production mode**. If you're running your app in development with `npm run dev`, prefetching won't be triggered. To see it in action, stop the dev server, run `npm run build` to generate your production bundle, and start the app with `npm run start`.

You can observe this behavior in your browser’s Network tab. Once the page finishes loading (after the `load` event fires), links that are already visible (i.e., above the fold) start prefetching. Links that are out of view will be prefetched as the user scrolls them into the viewport.

Prefetching happens automatically on fast internet connections (like Wi-Fi or 3G+), unless the browser sends a `Save-Data` header indicating a preference for reduced data usage.

If you want to disable prefetching for a specific link, you can do so by passing `prefetch={false}` to the `<Link>` component:

```jsx
<Link href="/contact" prefetch={false}>
  Contact
</Link>
```


Prefetching content in Next.js


If you’re inside a React component, grab the router instance with the `useRouter` hook:

```js
import { useRouter } from "next/router";

function MyComponent() {
  const router = useRouter();

  // reload the current page
  router.reload(window.location.pathname);
}
```

If you need to trigger a reload from outside a component—for example, in a plain utility module—just import the singleton `Router` instead:

```js
import Router from "next/router";

// reload the current page
Router.reload(window.location.pathname);
```


Force refresh page in Next.js


Minimalist website design is a refined art form focused on simplicity, clarity, and functionality. By stripping away nonessential elements, it highlights what truly matters and creates a seamless experience for visitors.

## 7 Principles of Minimalist Web Design

1. Embrace Simplicity
2. Prioritize User Experience
3. Showcase Quality Visuals
4. Leverage Whitespace
5. Highlight Content
6. Ensure Fast Load Times
7. Implement Clear Calls to Action

### 1. Embrace Simplicity

At the heart of minimalist design is simplicity. A straightforward, uncluttered layout with a restrained color palette, fonts, and graphics creates an inviting environment. Generous whitespace not only enhances aesthetics but also improves readability, allowing your content to shine.

A good example is SquareSpace website, simple and clean showing only content that is important

![squarespace](https://i.imgur.com/5UdMe3o.png)

### 2. Prioritize User Experience

A user-centric approach is essential in minimalist design. Your website should be intuitive, with streamlined navigation and legible typography. Given the increasing use of mobile devices, ensure that your site is responsive and offers a smooth experience on all screen sizes.

![vercel's website](https://i.imgur.com/6EXviAn.png)

### 3. Showcase Quality Visuals

Minimalism does not equate to a lack of visual appeal. Instead, select high-caliber images or illustrations that resonate with your brand’s identity. Opt for unique visuals rather than generic stock photos to add a touch of personality and distinction.

### 4. Leverage Whitespace

Whitespace, or negative space, is a critical design element that lends structure and focus to your layout. It helps guide the visitor’s eye toward key content and creates a sense of balance and harmony throughout the site.

### 5. Highlight Content

In minimalist design, content remains the focal point. Employ concise and precise language to communicate your message effectively. Use headings and subheadings to break up text, making it both engaging and easy to navigate, while avoiding distractions that detract from your core message.

Stripe‘s website is both functional and visually appealing. The website features a clean white background, straightforward typography, and plenty of negative space, making it easy to navigate and understand. The design highlights the company’s products and services without distracting users with unnecessary graphics or information.

![stripe website](https://i.imgur.com/B9F6Mnp.png)

### 6. Ensure Fast Load Times

A hallmark of minimalist design is its ability to enhance performance. By using a lightweight theme, compressing images, and minimizing extraneous code, you can achieve faster load times, thereby improving overall user satisfaction and search engine performance.

### 7. Implement Clear Calls to Action

While the design is minimalist, your calls to action (CTAs) should be unmistakably clear and compelling. Use direct language and contrasting elements to ensure that your CTAs stand out, guiding visitors seamlessly toward the desired actions.

## Conclusion

In summary, minimalist website design is both an art and a science—a pursuit of elegance through simplicity. By adhering to these seven principles, you can craft a website that not only captivates visually but also delivers a superb user experience.

A minimalist approach ensures that every element has a purpose, transforming your website into a sophisticated, efficient, and enjoyable digital space that leaves a lasting impression on visitors. Embrace simplicity, enhance functionality, and let your content take center stage while delighting your audience with a touch of fun and refinement.


Preet Suthar

Work

Design

Writing

Sponsors

Contact