Dropdown menus are little pop-up menus that help you show more options without cluttering your screen. They’re super helpful in websites and apps.

In this guide, you’ll learn how to build a dropdown menu using shadcn/ui. It’s a tool that works well with Tailwind CSS and Radix UI to help you make nice-looking, easy-to-use menus.

Table of Contents

• What is shadcn/ui?

• Why Use shadcn/ui for Dropdowns?

• Let’s Build a Dropdown Step-by-Step

  • Step 1: Start a New Project

  • Step 2: Add the Dropdown Menu Component

  • Step 3: Import What You Need

  • Step 4: Build a Simple Dropdown

  • Step 5: Make It Look Better

  • Step 6: Make It Work on All Screens

  • Step 7: Add Cool Icons

  • Step 8: It’s Already Accessible!

• Real-World Use Case: Country Dropdown with Flags

• Final Thoughts

💡 Prerequisites

Before we start, make sure you have:

• Basic knowledge of React and JavaScript

• Node.js and a package manager like npm, pnpm, or yarn are installed

• Familiarity with Tailwind CSS is a bonus, but not required

We’ll walk through everything step by step, so don’t worry if you’re not an expert yet.

What is shadcn/ui?

shadcn/ui is a group of tools (called components) that help you build parts of a website, like buttons, modals, and dropdowns. It’s built with Radix UI and styled using Tailwind CSS. It’s perfect if you’re using React or Next.js.

With shadcn/ui, you don’t get just styled components, you get full control over how everything works and looks. That makes it perfect for teams that want consistency in design without giving up flexibility.

Why Use shadcn/ui for Dropdowns?

Dropdown menus are a great use case for shadcn/ui because:

• It’s easy to use with keyboard and screen readers

• You can create custom looks using Tailwind CSS

• You control how it works and looks

• It works great in real websites and apps

• It integrates well with modern React workflows

Let’s Build a Dropdown Step-by-Step

Step 1: Start a New Project with shadcn/ui

You don’t need to set up React, Next.js, or Tailwind manually. Just run this command:

pnpm dlx shadcn@latest init

This will automatically create a new Next.js app with Tailwind CSS and shadcn/ui preconfigured.

Tip: You can also use npx instead of pnpm dlx if you prefer:

npx shadcn@latest init

Step 2: Add the Dropdown Menu Component

After your project is ready, add the dropdown component using:

npx shadcn@latest add dropdown-menu

This will pull in all the necessary components to create a dropdown menu.

Step 3: Import What You Need

In your React file, import the full dropdown module so you can access all its features:

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuPortal,
} from "@/components/ui/dropdown-menu"

Step 4: Build a Simple Dropdown

Here’s a basic dropdown example:

export function ProfileMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button className="px-4 py-2 bg-primary text-white rounded">
          Open Menu
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
        <DropdownMenuItem>Log out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

This is just the start. You can add groups, submenus, and keyboard shortcuts for power users.

Step 5: Make It Look Better

Use Tailwind CSS to style your dropdown, and hover effects like this:

<DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button className="px-3 py-1.5 bg-primary text-white text-sm font-medium rounded-md hover:bg-primary/90 transition-colors">
            Open Menu
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-52 border-gray-200 shadow-lg rounded-md space-y-0.5">
          <DropdownMenuLabel className="text-xs text-gray-500">
            My Account
          </DropdownMenuLabel>
          <DropdownMenuSeparator className="border-t border-gray-100" />
          <DropdownMenuItem className="px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 rounded-md cursor-pointer transition-colors">
            Profile
          </DropdownMenuItem>
          <DropdownMenuItem className="px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 rounded-md cursor-pointer transition-colors">
            Settings
          </DropdownMenuItem>
          <DropdownMenuItem className="px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 rounded-md cur

Step 6: Make It Work on All Screens

Want your dropdown to be responsive? Use Tailwind’s responsive classes:

<DropdownMenuContent className="w-full md:w-64">

You can also dynamically position the dropdown using Radix’s built-in portal support.

Step 7: Add Cool Icons

Install Lucide icons:

npm install lucide-react

Then use them in your menu:

import { User, Settings, LogOut } from "lucide-react"

<DropdownMenuItem>
  <User className="mr-2 h-4 w-4" /> Profile
</DropdownMenuItem>

Icons help users scan options quickly – a great touch for UX.

Step 8: It’s Already Accessible!

shadcn/ui (thanks to Radix UI) makes your dropdown menu:

• Keyboard friendly

• Screen-reader ready

• Following best web practices

You don’t need to configure accessibility – it just works 🙂

Real-World Use Case: Country Dropdown with Flags

Looking for a more advanced dropdown? Here’s an amazing example that includes search, flag icons, and grouping:

👉 shadcn-country-dropdown.vercel.app

It’s open-source and a great place to see what’s possible with shadcn/ui.

Final Thoughts

Using shadcn/ui to create a dropdown menu is fast, simple, and powerful. You get great styling, accessibility, and full control over how things look and work. Whether you’re just starting out or building for production, this is a solid tool to use.

Dropdowns are just the beginning. shadcn/ui offers a whole library of headless components for building modern UIs.

I hope you found this article helpful! If you’re building a SaaS product or any web app that involves user interaction or conversion, consider enhancing user trust with real-time notifications like modal pop-ups, sales pop up, etc.

Source: freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More.

When you talk to an AI assistant, it can feel like it remembers what you said before.

But large language models (LLMs) don’t actually have memory on their own. They don’t remember conversations unless that information is given to them again.

So, how do they seem to recall things?

The answer lies in something called a vector store – and that’s what you’ll learn about in this article.

Table of Contents

• What Is a Vector Store?

• How Embeddings Work

• Why Vector Stores Are Crucial for Memory

• Popular Vector Stores

  • FAISS (Facebook AI Similarity Search)

  • Pinecone

• Making AI Seem Smart with Retrieval-Augmented Generation

• The Limits of Vector-Based Memory

• Conclusion

What Is a Vector Store?

A vector store is a special type of database. Instead of storing text or numbers like a regular database, it stores vectors.

A vector is a list of numbers that represents the meaning of a piece of text. You get these vectors using a process called embedding.

The model takes a sentence and turns it into a high-dimensional point in space. In that space, similar meanings are close together.

For example, if I embed “I love sushi,” it might be close to “Sushi is my favourite food” in vector space. These embeddings help an AI agent find related thoughts even if the exact words differ.

How Embeddings Work

Let’s say a user tells an assistant:

“I live in Austin, Texas.”

The model turns this sentence into a vector:

[0.23, -0.41, 0.77, ..., 0.08]

This vector doesn’t mean much to us, but to the AI, it’s a way to capture the sentence’s meaning. That vector gets stored in a vector database, along with some extra info – maybe a timestamp or a note that it came from this user.

Later, if the user says:

“Book a flight to my hometown.”

The model turns this new sentence into a new vector. It then searches the vector database to find the most similar stored vectors.

The closest match might be “I live in Austin, Texas.” Now the AI knows what you probably meant by “my hometown.”

This ability to look up related past inputs based on meaning – not just matching keywords – is what gives LLMs a form of memory.

Why Vector Stores Are Crucial for Memory

LLMs process language using a context window. That’s the amount of text they can “see” at once.

For GPT-4-turbo, the window can handle up to 128,000 tokens, which sounds huge – but even that gets filled fast. You can’t keep the whole conversation there forever.

Instead, you use a vector store as long-term memory. You embed and save useful info.

Then, when needed, you query the vector store, retrieve the top relevant pieces, and feed them back into the LLM. This way, the model remembers just enough to act smart – without holding everything in its short-term memory.

Popular Vector Stores

There are several popular vector databases in use. Each one has its strengths.

FAISS (Facebook AI Similarity Search)

FAISS is an open-source library developed by Meta. It’s fast and works well for local or on-premise applications.

FAISS is great if you want full control and don’t need cloud hosting. It supports millions of vectors and provides tools for indexing and searching with high performance.

Here’s how you can use FAISS:

from sentence_transformers import SentenceTransformer
import faiss
import numpy as np

# Load a pre-trained sentence transformer model that converts sentences to numerical vectors (embeddings)
model = SentenceTransformer('all-MiniLM-L6-v2')

# Define the input sentence we want to store in memory
sentence = "User lives in Austin, Texas"

# Convert the sentence into a dense vector (embedding)
embedding = model.encode(sentence)

# Get the dimensionality of the embedding vector (needed to create the FAISS index)
dimension = embedding.shape[0]

# Create a FAISS index for L2 (Euclidean) similarity search using the embedding dimension
index = faiss.IndexFlatL2(dimension)

# Add the sentence embedding to the FAISS index (this is our "memory")
index.add(np.array([embedding]))

# Encode a new query sentence that we want to match against the stored memory
query = model.encode("Where is the user from?")

# Search the FAISS index for the top-1 most similar vector to the query
D, I = index.search(np.array([query]), k=1)

# Print the index of the most relevant memory (in this case, only one item in the index)
print("Most relevant memory index:", I[0][0])

This code uses a pre-trained model to turn a sentence like “User lives in Austin, Texas” into an embedding.

It stores this embedding in a FAISS index. When you ask a question like “Where is the user from?”, the code converts that question into another embedding and searches the index to find the stored sentence that’s most similar in meaning.

Finally, it prints the position (index) of the most relevant sentence in the memory.

FAISS is efficient, but it’s not hosted. That means you need to manage your own infrastructure.

Pinecone

Pinecone is a cloud-native vector database. It’s managed for you, which makes it great for production systems.

You don’t need to worry about scaling or maintaining servers. Pinecone handles billions of vectors and offers filtering, metadata support, and fast queries. It integrates well with tools like LangChain and OpenAI.

Here’s how a basic Pinecone setup works:

import pinecone
from sentence_transformers import SentenceTransformer

# Initialize Pinecone with your API key and environment
pinecone.init(api_key="your-api-key", environment="us-west1-gcp")

# Connect to or create a Pinecone index named "memory-store"
index = pinecone.Index("memory-store")

# Load a pre-trained sentence transformer model to convert text into embeddings
model = SentenceTransformer('all-MiniLM-L6-v2')

# Convert a fact/sentence into a numerical embedding (vector)
embedding = model.encode("User prefers vegetarian food")

# Store (upsert) the embedding into Pinecone with a unique ID
index.upsert([("user-pref-001", embedding.tolist())])

# Encode the query sentence into an embedding
query = model.encode("What kind of food does the user like?")

# Search Pinecone to find the most relevant stored embedding for the query
results = index.query(queries=[query.tolist()], top_k=1)

# Print the ID of the top matching memory
print("Top match ID:", results['matches'][0]['id'])

Pinecone is ideal if you want scalability and ease of use without managing hardware.

Other popular vector stores include:

• Weaviate – Combines vector search with knowledge graphs. Offers strong semantic search with hybrid keyword support.

• Chroma – Simple to use and good for prototyping. Often used in personal apps or demos.

• Qdrant – Open-source and built for high-performance vector search with filtering.

Each of these has its place depending on whether you need speed, scale, simplicity, or special features.

Making AI Seem Smart with Retrieval-Augmented Generation

This whole system – embedding user inputs, storing them in a vector database, and retrieving them later – is called retrieval-augmented generation (RAG).

The AI still doesn’t have a brain, but it can act like it does. You choose what to remember, when to recall it, and how to feed it back into the conversation.

If the AI helps a user track project updates, you can store each project detail as a vector. When the user later asks, “What’s the status of the design phase?” you search your memory database, pull the most relevant notes, and let the LLM stitch them into a helpful answer.

The Limits of Vector-Based Memory

While vector stores give AI agents a powerful way to simulate memory, this approach comes with some important limitations.

Vector search is based on similarity, not true understanding. That means the most similar stored embedding may not always be the most relevant or helpful in context. For instance, two sentences might be mathematically close in vector space but carry very different meanings. As a result, the AI can sometimes surface confusing or off-topic results, especially when nuance or emotional tone is involved.

Another challenge is that embeddings are static snapshots. Once stored, they don’t evolve or adapt unless explicitly updated. If a user changes their mind or provides new information, the system won’t “learn” unless the original vector is removed or replaced. Unlike human memory, which adapts and refines itself over time, vector-based memory is frozen unless developers actively manage it.

There are a few ways you can mitigate these challenges.

One is to include more context in the retrieval process, such as filtering results by metadata like timestamps, topics, or user intent. This helps narrow down results to what’s truly relevant at the moment.

Another approach is to reprocess or re-embed older memories periodically, ensuring that the information reflects the most current understanding of the user’s needs or preferences.

Beyond technical limitations, vector stores also raise privacy and ethical concerns. Key questions are: Who decides what gets saved? How long should that memory persist? And does the user have control over what is remembered or forgotten?

Ideally, these decisions should not be made solely by the developer or system. A more thoughtful approach is to make memory explicit. Let users choose what gets remembered. For example, by marking certain inputs as “important”, it adds a layer of consent and transparency. Similarly, memory retention should be time-bound where appropriate, with expiration policies based on how long the information remains useful.

Equally important is the ability for users to view, manage, or delete their stored data. Whether through a simple interface or a programmatic API, memory management tools are essential for trust. As the use of vector stores expands, so does the expectation that AI systems will respect user agency and privacy.

The broader AI community is still shaping best practices around these issues. But one thing is clear: simulated memory should be designed not just for accuracy and performance, but for accountability. By combining strong defaults with user control, developers can ensure vector-based memory systems are both smart and responsible.

Conclusion

Vector stores give AI agents a way to fake memory – and they do it well. By embedding text into vectors and using tools like FAISS or Pinecone, we give models the power to recall what matters. It’s not real memory. But it makes AI systems feel more personal, more helpful, and more human.

As these tools grow more advanced, so does the illusion. But behind every smart AI is a simple system of vectors and similarity. If you can master that, you can build assistants that remember, learn, and improve with time.

Hope you enjoyed this article. Connect with me on Linkedin.

Source: freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More.

Folks have a lot to say about “liquid glass,” the design aesthetic that Apple introduced at WWDC 2025. Some love it, some hate it, and others jumped straight into seeing how to they could create it in CSS.

There’s a lot to love, hate, and experience with liquid glass. You can love the way content reflects against backgrounds. You can hate the poor contrast between foreground and background. And you can be eager to work with it. All of those can be true at the same time.

I, for one, am generally neutral with things like this for that exact reason. I’m intrigued by liquid glass, but hold some concern about legibility, particularly as someone who already struggles with the legibility of Apple’s existing design system (notably in Control Center). And I love looking at the many and clever ways that devs have tried to replicate liquid glass in their own experiments.

So, I’m in the process of gathering notes on the topic as I wrap my head around this “new” (or not-so-new, depending on who’s talking) thing and figure out where it fits in my own work. These links are a choice selection of posts that I’ve found helpful and definitely not meant to be an exhaustive list of what’s out there.

WWDC Introduction

Always a good idea to start with information straight from the horse’s mouth.

In short:

• It’s the first design system that is universally applied to all of Apple’s platforms, as opposed to a single platform like Apple’s last major overhaul, iOS 7.
• It’s designed to refract light and dynamically react to user interactions.
• By “dynamic” we’re referring to UI elements updating into others as the context changes, such as displaying additional controls. This sounds a lot like the Dynamic Island, supporting shape-shifting animations.
• There’s a focus on freeing up space by removing hard rectangular edges, allowing UI elements to become part of the content and respond to context.

Apple also released a more in-depth video aimed at introducing liquid glass to designers and developers.

In short:

• Liquid glass is an evolution of the “aqua” blue interface from macOS 10, the real-time introduced in iOS 7, the “fluidity” of iOS 10, the flexibility of the Dynamic Island, and the immersive interface of visionOS.
• It’s a “digital meta-material” that dynamically bends and shapes light while moving fluidly like water.
• It’s at least partially a response to hardware devices adopting deeper rounded corners.
• Lensing: Background elements are bended and warped rather than scattering light as it’s been in previous designs. There’s gel-like feel to elements.
• Translucence helps reveal what is underneath a control, such as a progress indicator you can scrub more precisely by seeing what is behind the surface.
• Controls are persistent between views for establishing a relationship between controls and states. This reminds me of the View Transition API.
• Elements automatically adapt to light and dark modes.
• Liquid glass is composed of layers: highlight (light casting and movement), shadow (added depth for separation between foreground and background), and illumination (the flexible properties of the material).
• It is not meant to be used everywhere but is most effective for the navigation layer. And avoid using glass on glass.
• There are two variants: regular (most versatile) and clear (does not have adaptive behaviors for allowing content to be more visible below the surface).
• Glass can be tinted different colors.

Documentation

Right on cue, Apple has already made a number of developer resources available for using and implementing liquid glass that are handy references.

• Introduction to Liquid Glass
• Adopting Liquid Glass
• Landmarks: Building an app with Liquid Glass
• Applying Liquid Glass to custom views

‘Beautiful’ and ‘Hard to Read’: Designers React to Apple’s Liquid Glass Update

This Wired piece is a nice general overview of what liquid glass is and context about how it was introduced at WWDC 2025. I like getting a take on this from a general tech perspective as opposed to, say, someone’s quick hot take. It’s a helpful pulse on what’s happening from a high level without a bunch of hyperbole, setting the stage for digging deeper into things.

In short:

• Apple is calling this “Liquid Glass.”
• It’s Apple’s first significant UI overhaul in 10 years.
• It will be implemented across all of Apple’s platforms, including iOS, macOS, iPadOS, and even the Vision Pro headset from which it was inspired.
• “From a technical perspective, it’s a very impressive effect. I applaud the time and effort it must have taken to mimic refraction and dispersion of light to such a high degree.”
• “Similar to the first beta for iOS 7, what we’ve seen so far is rough on the edges and potentially veers into distracting or challenging to read, especially for users with visual impairments.”

Accessibility

Let’s get right to the heart of where the pushback against liquid glass is coming from. While the aesthetic, purpose, and principles of liquid glass are broadly applauded, many are concerned about the legibility of content against a glass surface.

Traditionally, we fill backgrounds with solid or opaque solid color to establish contrast between the foreground and background, but with refracted light, color plays less a role and it’s possible that highlighting or dimming a light source will not produce enough contrast, particularly for those with low-vision. WCAG 2.2 emphasizes color and font size for improving contrast and does provide guidance for something that’s amorphous like liquid glass where bending the content below it is what establishes contrast.

“Apple’s “Liquid Glass” and What It Means for Accessibility”:

• “When you have translucent elements letting background colors bleed through, you’re creating variable contrast ratios that might work well over one background, but fail over a bright photo of the sunset.”
• “Apple turned the iPhone’s notch into the Dynamic Island, Android phones that don’t have notches started making fake notches, just so they could have a Dynamic Island too. That’s influence. But here they are making what looks like a purely aesthetic decision without addressing the accessibility implications.”
• “People with dyslexia, who already struggle with busy backgrounds and low-contrast text, now deal with an interface where visual noise is baked into the design language. People with attention disorders may have their focus messed up when they see multiple translucent layers creating a whole lot of visual noise.”
• “It’s like having a grand entrance and a side door marked ‘accessible.’ Technically compliant. But missing the point.”
• “The legal landscape adds another layer. There’s thousands of digital accessibility lawsuits filed in the U.S. yearly for violating the ADA, or the American Disabilities Act. Companies are paying millions in settlements. But this is Apple. They have millions. Plus all the resources in the world to save them from legal risks. But their influence means they’re setting precedents.”

“Liquid Glass: Apple vs accessibility”:

• “Yet even in Apple’s press release, linked earlier, there are multiple screenshots where key interface components are, at best, very difficult to read. That is the new foundational point for Apple design. And those screenshots will have been designed to show the best of things.”
• “Apple is still very often reactive rather than proactive regarding vision accessibility. Even today, there are major problems with the previous versions of its operating systems (one example being the vestibular trigger if you tap-hold the Focus button in Control Centre). One year on, they aren’t fixed.”
• “State, correctly, that Apple is a leader in accessibility. But stop assuming that just because this new design might be OK for you and because Apple has controls in place that might help people avoid the worst effects of design changes, everything is just peachy. Because it isn’t.”

“Liquid Glass” by Hardik Pandya

• “The effect is technically impressive, but it introduces a layer of visual processing between you and your memories. What was once immediate now feels mediated. What was once direct now feels filtered.”
• “While Apple’s rationale for Liquid Glass centers on ‘seeing’ content through a refractive surface, user interface controls are not meant to be seen—they are meant to be operated. When you tap a button, slide a slider, or toggle a switch, you are not observing these elements. You are manipulating them directly.”
• “Buttons become amorphous shapes. Sliders lose their mechanical clarity. Toggle switches abandon their physical affordances. They appear as abstract forms floating behind glass—beautiful perhaps, but disconnected from the fundamental purpose of interface controls: to invite and respond to direct manipulation.”
• “The most forward-thinking interface design today focuses on invisibility – making the interaction so seamless that the interface itself disappears. Liquid Glass makes the interface more visible, more present, and more demanding of attention.”

“Liquid glass, now with frosted tips”:

• It’s easy to dump on liquid glass in its introductory form, but it’s worth remembering that it’s in beta and that Apple is actively developing it ahead of its formal release.
• A lot has changed between the Beta 2 and Beta 3 releases. The opacity between glass and content has been bumped up in several key areas.

Tutorials, Generators, and Frameworks

It’s fun to see the difference approaches many folks have used to re-create the liquid glass effect in these early days. It amazes me that there is already a deluge of tutorials, generators, and even UI frameworks when we’re only a month past the WWDC 2025 introduction.

• Create this trendy blurry glass effect with CSS (Kevin Powell)
• Liquid Glass design using CSS (Nordcraft)
• Adopting Apple’s Liquid Glass: Examples and best practices (LogRocket)
• Liquid Glass Figma File
• CSS Liquid Glass Effects (DesignFast)
• Liquid Glass UI Framework
• Liquid Glass CSS Generator

Experiments

Let’s drop in a few interesting demos that folks have created. To be clear, glass-based interfaces are not new and have been plenty explored, which you can find over at CodePen in abundance. These are recent experiments. The most common approaches appear to reach for SVG filters and background blurs, though there are many programmatic demos as well.

Using a CSS-only approach with an SVG filter with backdrop-filter with a series of nested containers that sorta mimics how Apple describes glass as being composed of three layers (highlight, shadow and illumination):

Same sort of deal here, but in the context of a theme toggle switch that demonstrates how glass can be tinted:

Comparing a straight-up CSS blur with an SVG backdrop:

Contextual example of a slider component:

Using WebGL:

Assorted links and coverage

A few more links from this browser tab group I have open:

• “Apple’s Liquid Glass is exactly as ambitious as Apple” (Fast Company)
• “Apple unveils iOS 26 with Liquid Glass” (9to5Mac)
• “Apple Announces All-New ‘Liquid Glass’ Software Redesign Across iOS 26 and More” (MacRumors)
• “Apple just added more frost to its Liquid Glass design” (The Verge)
• “Apple tones down Liquid Glass effect in iOS 26 beta 3” (The Apple Post)
• “More assorted notes on Liquid Glass” (Riccardo Mori)
• A bunch of CodePen Collections

Getting Clarity on Apple’s Liquid Glass originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.