Ajay Patel - freeCodeCamp.org

How to Use Flex in Tailwind CSS and Justify Flex Items

Ajay Patel — Wed, 11 Mar 2026 16:24:59 +0000

Hey there! If you're building modern web interfaces, chances are you've already fallen in love with Tailwind CSS for its speed and flexibility.

One of the most powerful tools in Tailwind's arsenal is its set of Flexbox utilities. Flexbox lets you create dynamic, responsive layouts without writing custom CSS, and Tailwind makes it incredibly intuitive with simple class names.

In this tutorial, we'll walk through everything you need to know about using Flexbox in Tailwind, from the basics to advanced patterns. Whether you're a beginner or looking to level up your layouts, by the end, you'll feel confident building anything from card grids to complex dashboards.

Prerequisites
What is Flexbox?
How Tailwind CSS Makes Flexbox Easy to Use
How to use flex in Tailwind
Flex Item Sizing: Basis, Grow & Shrink
Controlling Flex Direction
Fine-Tuning Flexbox Layout
How to Justify and Align Flex Items in Tailwind
Practice Flexbox with Interactive Games
Conclusion:

Prerequisites

Before diving into Flexbox with Tailwind CSS, it helps to have a few basics in place so you can follow along comfortably.

Basic Knowledge:

A foundational understanding of HTML (how elements and containers work).
Basic familiarity with CSS (especially properties like display, width, and height).
A general idea of how responsive design works (helpful but not required).

You do not need to be a Flexbox expert, as we’ll cover the important concepts as we go.

Tools You’ll Need:

A code editor like VS Code (or any editor you prefer)
A browser for testing layouts
A project with Tailwind CSS installed

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout model designed to make it easier to design flexible, responsive layouts without using floats or complicated positioning tricks.

Before Flexbox, aligning elements vertically, spacing items evenly, or making layouts adapt to different screen sizes was often frustrating and required hacks. Flexbox solves these problems by providing a simple and predictable way to control alignment, spacing, and ordering of elements inside a container.

The main concept is simple:

You have a flex container
Inside it are flex items
The container controls how its items are laid out

Once an element is set to display: flex, its children automatically become flex items.

.container {
  display: flex;
}

How Tailwind CSS Makes Flexbox Easy to Use

Flexbox is powerful, but writing custom CSS for every layout can become repetitive and time-consuming. Tailwind CSS simplifies this by providing utility classes that map directly to Flexbox properties, allowing developers to build layouts quickly without writing custom CSS.

Instead of switching between HTML and CSS files, Tailwind lets you apply Flexbox behavior directly in your markup, making layouts more readable and faster to develop. It turns Flexbox's sometimes verbose properties into short, memorable utilities. No more remembering justify-content: space-between; just write justify-between.

Benefits:

Responsive by default (add md:, lg:, and so on)
Composable (combine classes freely).
No custom CSS needed for most cases.

How to Use Flex in Tailwind

Flexbox is one of the most powerful layout systems in modern CSS, and Tailwind CSS makes it extremely approachable by exposing Flexbox behavior through simple utility classes. Instead of writing custom CSS, you compose layouts directly in your HTML using predefined classes.

flex: The flex Class is the foundation of Flexbox in Tailwind.
flex-1: Allows the element to grow and shrink and forces it to take up the remaining available space.
flex-auto: It makes an item flexible while respecting its content size – that is, it only grows and shrinks as needed.
flex-none: Disables growing and shrinking for an item.

Here is a basic example that shows where to place these classes:



  
  Item 1
  Item 2
  Item 3

Flex Item Sizing: Basis, Grow, & Shrink

Three fundamental properties control how elements size themselves inside a flex container:

flex-basis
flex-grow
flex-shrink

Rather than thinking in fixed widths and heights, Flexbox uses a dynamic space-distribution model. Each flex item starts with an initial size, then grows or shrinks depending on the available space and the rules defined by these three properties.

flex-basis

flex-basis controls the initial size of a flex item before flex-grow or flex-shrink kick in. Think of it as the item’s starting width or height (depending on flex direction).


	01
  02

Here's what this makes:

flex-basis's most used utility classes are:

basis-auto: This means the item’s initial size is based on its content size or any explicitly defined width/height. It doesn't force a specific starting size. Instead, it respects intrinsic sizing.
basis-0: This makes the item start at 0 width (or height in column layouts) before space is distributed. It’s commonly used with grow to evenly distribute space regardless of content size.
basis-full: The item initially takes up the entire width (or height) of the container before shrinking or wrapping.
basis-xs/md/lg/xl..: Built-in values.
basis-: Giving a value with a dynamic such as 1/2, 4/5, and so on.
basis-: Uses Tailwind’s spacing scale (in rem units).
basis-[]: Syntax to set the basis based on a completely custom value.

flex-grow

flex-grow controls how much a flex item expands to fill extra space in the flex container. It determines how leftover space is distributed among flex items after their initial sizes.


	01
  02
  03

Here's what this creates:

flex-grow's most used utility classes are:

grow: The item will grow to take up available extra space. If multiple items use grow, they share space equally (unless different grow values are specified)..
grow-0: The item will not expand beyond its initial size, even if extra space is available.
grow-: If one item has grow-2 and another has grow-1, the first item gets twice as much extra space as the second.
grow-[]: Allows a custom grow value (e.g. grow-[3]).

flex-shrink

flex-shrink controls how much a flex item shrinks when there isn’t enough space in the flex container. It determines how items reduce their size relative to each other when the container overflows.


	01
  02
  03

Here's what this creates:

flex-shrink's most used utility classes are:

shrink: The item is allowed to shrink when necessary to prevent overflow.
shrink-0: The item will not shrink, even if space becomes limited. This may cause overflow if other items cannot compensate.
shrink-: Sets proportional shrinking behavior. An item with shrink-2 will shrink twice as much as one with shrink-1.
shrink-[]: Syntax to set a completely custom shrink value.

Controlling Flex Direction

In Tailwind CSS, the direction in which flex items are laid out is controlled using flex-direction utilities. These utilities define whether items are placed horizontally or vertically, and in which order.

flex-row

flex-row is the default flex direction in both CSS Flexbox and Tailwind. When it is applied, flex items are laid out horizontally along the main axis, starting from left to right (in left-to-right languages).


  01
  02
  03

This outputs:

Use case: Navigation bars, horizontal button groups, toolbars.

flex-row-reverse

The flex-row-reverse utility lays out flex items horizontally, but in the opposite direction from right to left. While the visual order of items is reversed, the HTML source order remains unchanged, which is important for accessibility and screen readers.


  01
  02
  03

Output:

Use case: Forms, cards, sidebars, vertical menus.

flex-col

The flex-col utility changes the flex direction to vertical, stacking items from top to bottom. In this case, the main axis runs vertically.


  01
  02
  03

Output:

Use case: Forms, cards, sidebars, vertical menus.

flex-col-reverse

In flex-col-reverse, items are stacked vertically, but in reverse order, starting from bottom to top (that is, vertically reverse order).


  01
  02
  03

Here's the output:

Use case: Chat messages, timelines, or when newer content should appear at the bottom.

Now you know a bit about managing flex-directions using tailwind utility classes. You can mange the stack depending on your needs.

Responsive Control

Tailwind also allows you to change flex direction at different breakpoints so you’ll get a clean layout across different devices.


	.....

This stacks items vertically on small screens and switches to a horizontal layout on medium screens and above.

Fine-Tuning Flexbox Layout

Once a container is set to use Flexbox, the real power comes from controlling how flex items behave inside it. This is where properties like wrap, order, and gap become essential. These features determine how items flow, how they're visually arranged, and how much space exists between them.

In real-world layouts such as card grids, navigation menus, and dashboards, elements rarely fit perfectly in a single row or follow a fixed order across all screen sizes. Flexbox provides solutions to these challenges, and Tailwind CSS exposes them through simple, intuitive utility classes.

Wrap helps manage what happens when items exceed the available space
Order allows you to rearrange elements visually without changing the HTML structure
Gap controls spacing between items in a clean and predictable way

Let’s dive into the depths of these fine-tuning flexbox properties.

flex-wrap

By default, Flexbox tries to fit all items into one line. If there isn’t enough space, items will shrink to squeeze in. flex-wrap allows flex-items to move onto the next line instead of shrinking.


	01
	02
	03

Utility classes:

flex-nowrap: (default) All items stay on one line.
flex-wrap: Items wrap onto multiple lines.
flex-wrap-reverse: Items wrap, but in reverse order.

flex-order

flex-order controls the visual order of the stack/flex-items without changing the HTML structure. Each item has an order value. Items with lower order values appear first.


	01
	02
	03

Utility classes:

order-1 to order-12: Sets order value.
order-first: Moves item to the start.
order-last: Moves item to the end.
order-none: Default order (0).

gap

gap controls the space between flex items, both rows and columns, without using margins. You can also apply for axis, which will help in giving space in both horizontal and vertical directions.

Here's an example of using it with a horizontal layout:


	01
	02
	03

And here's an example showing a vertical layout:


	01
	02
	03

Utility classes:

gap-: Applies space (x-axis by default) between items according to the number, as shown in the example.
gap-[]: You can apply a custom gap inside square brackets, such as gap-[10px].
gap-x-: Provides horizontal spacing only.
gap-y-: Provides vertical spacing only.

Responsive Design

You can prefix the gap, column-gap, and row-gap utilities with a breakpoint variant, like lg: to only apply the utility at larger screen sizes and above. Here's an example:

How to Justify and Align Flex Items in Tailwind

If you're building interactive components like dropdowns, menus, or toolbars using Flexbox, alignment becomes even more important when handling keyboard navigation.

For example, when using arrow keys to navigate horizontally aligned items (justify-between, justify-center, and so on), proper spacing ensures a better user experience. You can explore how Tailwind CSS keyboard navigation works with arrow keys in FlyonUI.

FlyonUI provides accessible Tailwind components that integrate smoothly with Tailwind CSS, especially helpful when building flex-based navigation layouts.

Tailwind CSS offers a wide range of utility classes for aligning and justifying flex items, which can sometimes be confusing to differentiate. Below is a concise overview of these classes, along with practical examples.

justify-content

justify-content is a flexbox property that controls how flex items are aligned along the main axis of a flex container. It decides how items are spaced inside a flex container. It is applied along with class flex.

Here's an example:


	01
	02
	03

Utility classes:

justify-start: Aligns items at the start of the container.
justify-center: Centers items along the main axis.
justify-end: Aligns items at the end of the container.
justify-between: Adds space between items, pushing first and last items to the edges.
justify-around: Adds equal space around each item.
justify-evenly: Distributes items with equal spacing everywhere, including edges.

Align Items

align-items is a flexbox property that controls how flex items are aligned along the cross-axis of a flex container.

In a row-based flex container (flex-row, which is the default direction), the cross axis is vertical. That means align-items controls vertical alignment.

In a column-based container (flex-col), the cross axis becomes horizontal, so align-items controls horizontal alignment instead.

This property is applied alongside the flex class and is commonly used to align items consistently inside navigation bars, toolbars, cards, and forms.


	01
	02
	03

Utility classes:

items-start: Aligns items to the start of the cross-axis (top in a row).
items-center: Centers items vertically along the cross-axis.
items-end: Aligns items to the end of the cross axis (bottom in a row).
items-baseline: Aligns items based on their text baseline.
items-stretch: Stretches items to fill the container (default behavior).

Practice Flexbox with Interactive Games

Reading documentation is important, but Flexbox really clicks when you practice it visually. One of the best ways to build strong Flexbox intuition is through interactive games that let you experiment with alignment, spacing, and direction in real time.

Here are two excellent games that will strengthen your Flexbox fundamentals and make Tailwind’s flex utilities feel second nature:

Flexbox Froggy

🔗 https://flexboxfroggy.com/

Flexbox Froggy is a fun and beginner-friendly game where you help frogs reach their lily pads using Flexbox properties. Each level introduces a new concept, like justify-content, align-items, flex-direction, and flex-wrap.

Why it’s great:

Perfect for beginners
Visual feedback makes concepts easy to grasp
Covers core Flexbox properties step by step

If you’re new to Flexbox, this is one of the best places to start.

Flexbox Adventure (Coding Fantasy)

🔗 https://codingfantasy.com/games/flexboxadventure

Flexbox Adventure turns Flexbox learning into a role-playing game where you move your character by writing Flexbox rules. It focuses more on real-world layout thinking and helps reinforce how different properties work together.

Why it’s great:

More challenging than Flexbox Froggy
Helps solidify intermediate concepts
Encourages problem-solving with Flexbox logic

This is a great follow-up once you’re comfortable with the basics.

Conclusion

Flexbox is a core part of modern CSS layouts, and Tailwind CSS makes it even more powerful by turning Flexbox properties into simple, readable utility classes. By understanding utilities for direction, sizing, wrapping, spacing, ordering, and alignment, you can build responsive and flexible layouts without writing custom CSS.

And by understanding how properties like flex, grow, shrink, basis, justify-*, items-*, gap, when responsive variants work together, you can build layouts that are not only flexible and responsive but also maintainable and scalable.

Instead of wrestling with custom CSS, Tailwind allows you to express layout intent directly in your markup, keeping your workflow fast and predictable.

With these Flexbox fundamentals in your toolkit, you’re well-equipped to design clean, responsive interfaces using Tailwind CSS with confidence. 🚀

How Does an MCP Work Under the Hood? MCP Workflow Explained

Ajay Patel — Tue, 16 Dec 2025 18:35:11 +0000

We’ve all faced that awkward limitation with AI: it can write code or explain complex topics in seconds, but the moment you ask it to check a local file or run a quick database query, it hits a wall. It’s like having a genius assistant who is locked in an empty room—smart, but completely cut off from your actual work. This is where the Model Context Protocol (MCP) changes the game. In this article, we’ll explore MCP in depth.

MCP Server: A-Z of Model Context Protocol
What is MCP (Model Context Protocol)?
Architecture of MCP
How Does MCP Work?
MCP vs RAG
MCP vs A2A
Resources
Conclusion

MCP Server: A-Z of Model Context Protocol

LLMs possess impressive knowledge and reasoning skills, which allow them to perform many complex tasks. But the problem is that their knowledge is limited to their initial training data. It means they can’t access your calendar, run SQL queries, or send an email.

It was clear that, to give the LLMs real-world knowledge, we have to provide some integrations that enable them to access real-time knowledge or perform some actions in the real world. This leads to the classic MxN problems, where developers have to build and maintain custom integrations for every combination of M models and N tools.

The image below properly demonstrates the MxN Problem:

Function calling (also known as tool calling) provides a powerful and flexible way for OpenAI models to interface with external systems and access data outside their training data. However, this feature is currently exclusive to OpenAI models, creating vendor lock-in.

That’s where MCP steps in. MCP is a write once, use anywhere approach to the problem. An app developer can write a single MCP server for any AI system to use and expose a set of tools and data. Similarly, an AI system can implement the protocol and connect to any MCP server that exists today or in the future.

What is MCP (Model Context Protocol)?

MCP is an open-source standard, developed by Anthropic, for connecting AI applications to external systems.

By using an MCP, AI applications like Claude or ChatGPT can connect to data sources like local files and databases, tools like search engines and calculators, and workflows like specialized prompts—enabling them to access key information and perform tasks.

Think of an MCP like a USB-C port for AI applications. Just as USB-C provides a standardized way to connect electronic devices, an MCP provides a standardized way to connect AI applications to external systems.

The image below will help you to better understand the MCP Server:

Architecture of MCP

The Model Context Protocol has a clear structure with components that work together to help LLMs and outside systems interact easily. An MCP follows a simple client-server architecture, which can be broken down into three simple key components:

MCP Host

The host is the user-facing AI application, the environment where the AI model lives and interacts with the user. Hosts manage the discovery, permissions, and communication between clients and servers. This ca be a chat application like OpenAI’s ChatGPT interface or Anthropic’s Claude desktop app, or an AI-enhanced IDE like Cursor & Windsurf.

MCP Client

The MCP client is a component within the host that handles the low-level communication with the MCP server. MCP clients are instantiated by host applications to communicate with particular MCP servers. Each client handles one direct communication with one server.

Here, the difference is important: the host is the application users interact with, while clients are the components that enable server connections.

MCP Server

The MCP server is the external program or service that exposes the capabilities (tools, data, and so on) to the application. An MCP server can be seen as a wrapper around some functionality, which exposes a set of tools or resources in a standardized way so that any MCP client can invoke them.

Servers can run locally on the same machine as the host, or remotely on some cloud service, since an MCP is designed to support both scenarios seamlessly

The image below will help you to better understand the concept:

An MCP server can expose one or more capabilities to the client. Capabilities are essentially the features or functions that the server makes available.

The MCP server provides the following capabilities:

Tools: Tools are the functions that do something on behalf of the AI model. An AI can use this tool whenever required. Tools are triggered by the AI model’s choice, which means the LLM (via the host) decides to call a tool when it determines it needs to perform a specific task. For example: send_email -> send the email to the user
Resources: Resources provide read-only data to the AI model. A resource can be a database record or a knowledge base that the AI can query to get information, but can’t modify.
Prompts: Prompts are the predefined templates or workflows that the server can provide.

Transport Layer

The transport layer uses JSON-RPC 2.0 messages to communicate between the client and server. For this, we have mainly two transport methods:

Standard Input/Output (stdio): Ideal for local environments, providing fast and synchronous message transmission.
Server-Sent Events (SSE): Best suited for remote resources, enabling efficient, real-time, one-way data streaming from the server to the client.

How Does MCP Work?

An MCP gives an AI assistant the ability to securely use external tools, databases, and services. Imagine you ask Claude:

“Find the latest sales report in our database and email it to my manager.”

Step #1 - Tool Discovery

When we launch any MCP client (Claude Desktop), it connects to your configured MCP servers and asks: “What can I do with available tools?”

Each server responds with its available tools:

database_query ,email_sender ,file_browser

Now, Claude knows about the tools it has.

Step #2 - Understanding Your Requirement

Claude reads your query and realizes:

It needs to retrieve information it doesn’t have (in this case, it has to find the sales data database_query)
It needs to take an external action (send email email_sender )

So Claude plans a 2-step tool sequence.

Step #3 - Ask for Permission

Before any external action happens, Claude Desktop prompts you: “Claude wants to query your sales database. Allow?”

Nothing proceeds without your approval. This is core to the MCP’s security model.

Step #4 - Querying the Database

Once you grant the permission, Claude sends a structured MCP tool call to the database_query server.

Next, the server will run a secure database lookup and return the latest sales report data. This doesn’t give Claude direct access to the database.

Step #5 - Sending the Email

Once Claude has the data, Claude triggers a second permission prompt: “Claude wants to send an email on your behalf. Approve?”

Once approved, MCP sends the information to the email_sender server, and Claude will format the email & deliver it to your manager

Step #6 - Natural Answer

Claude wraps everything up nicely and sends a response to you, “Done! I found the latest sales report and emailed it to your manager.”

The entire process typically happens in seconds. From your perspective, Claude simply "knows" how to access your database and send emails, but in reality, the MCP has orchestrated a secure, standardized exchange between multiple systems.

The beauty of MCP is that it transforms AI assistants from isolated conversational tools into genuine productivity partners that can interact with your entire digital ecosystem, safely and with your explicit permission every step of the way.

MCP vs RAG

Fundamentally, MCP and RAG are built for serving different purposes.

RAG is a technique that is used to supply the relevant knowledge that we have stored in a vector database. In RAG, the user’s query is converted to a vector embedding, which searches through embeddings in the vector database and finds the relevant context based on similarity. This relevant context is then provided to the LLM. It is great for answering questions from large documents like company wikis, knowledge bases, or research papers.

An MCP enables AI models to perform real-world actions with the help of tools. It lets the AI connect to tools and services like databases, APIs, Gmail, calendar, and so on.

MCP vs A2A

The Model Context Protocol (MCP) and the Agent-to-Agent (A2A) protocol are complementary open standards in AI architecture that serve different purposes in how AI agents connect with external systems.

MCP standardizes how a single AI agent connects to tools, data, and external systems (agent-to-tool communication).
A2A standardizes how multiple, independent AI agents communicate and collaborate with each other (agent-to-agent communication).

Resources

For more information on the MCP, you can refer to the official website: modelcontextprotocol.io.

Some of the awesome MCP Servers which you can check:

Brave Search MCP Server
- An MCP server implementation that integrates the Brave Search API, providing both web and local search capabilities.
Sentry MCP server
- This server provides tools to inspect error reports, stacktraces, and other debugging information from your Sentry account.
Google Maps MCP Server
- MCP Server for the Google Maps API.
Tailwind MCP Server by FlyonUI
- MCP Server for FlyoUI - Generate Amazing UIs/Themes/Sections with just a single prompt.
git MCP server
- A Model Context Protocol server for Git repository interaction and automation. This server provides tools to read, search, and manipulate Git repositories via Large Language Models.
GitHub MCP Server
- MCP Server for the GitHub API, enabling file operations, repository management, search functionality, and more.
Shadcn MCP Server
- MCP Server for shadcn/studio - Generate Amazing UIs/Themes/Sections with just a single prompt.

You can explore a list of available MCP servers here: https://github.com/punkpeye/awesome-mcp-servers

If you're interested in learning how to build your own MCP server, check out this detailed course on Hugging Face: https://huggingface.co/mcp-course.

Conclusion

MCP (Model Context Protocol) is an open-source standard for connecting AI applications to external systems. With MCP, AI models are not just chatbots, they are fully capable agents that can work with your local files, query your database, send emails with your permission and control.

It has also solved the classic MxN problem—developers only need to build the MCP server once, then all other AI systems can integrate the MCP server in their application.

MCP is the revolution in how AI systems can interact with the real world. As the ecosystem of the MCP continues to grow, it will enable AI agents to become more powerful assistants that can operate across diverse environments with reliability and security.

How to Build an Admin Dashboard with shadcn/ui and TanStack Start

Ajay Patel — Thu, 04 Dec 2025 16:57:05 +0000

In this guide, we’ll build a feature-rich admin dashboard using shadcn/ui for beautiful, reusable components and TanStack Start for a powerful, type-safe full-stack framework.

By the end, you’ll have:

A fully functional /dashboard layout
A statistics-rich dashboard home page with charts and tables
A Products page using TanStack Query and TanStack Table
A Settings page with profile and notification controls

Why TanStack Start?
Why shadcn/ui?
How to Build the Admin Dashboard Using shadcn/ui and TanStack Start
Live Demo & Source Code
Summary
- What’s Next?
- Resources:

Prerequisites

Before we start the guide, let’s understand the basic requirements of the project:

Node.js 18+ installed
Basic knowledge of React and TypeScript
Familiarity with TailwindCSS

What we will build

In this article, we’ll build a fully functional admin dashboard with three main sections:

Dashboard overview: A home page that displays various charts showing sales metrics, product insights widgets, and a transaction history table.
Products: A product page that demonstrates data fetching, server-side pagination, and advanced table features like column searching, sorting, and column filtering.
Settings: A user-friendly settings page with profile management and notification preferences.

The dashboard will include a responsive sidebar navigation, breadcrumb trails, a user profile dropdown, and a language selector.

Why TanStack Start?

TanStack Start is a modern full-stack React framework built on top of TanStack Router. It aims to be a flexible, type-safe alternative to traditional meta-frameworks like Next.js.

Some key benefits of TanStack Start include:

Type-safe routing and data loading
Server-side rendering (SSR) out of the box
Built on TanStack Router, with file-based routing
Great DX with TypeScript and TanStack Query integration

We’ll pair it with shadcn/ui to quickly build a polished admin dashboard.

Why shadcn/ui?

shadcn/ui is a collection of beautifully designed, accessible React components built on top of Radix UI and styled with Tailwind CSS.

Instead of installing a package, you can copy and paste the component's code directly into your project or use a CLI to generate it. This gives you full control over the code structure & styling. This approach makes Shadcn highly customizable for frameworks like TanStack Start, Next.js, Astro, and so on.

How to Build the Admin Dashboard Using shadcn/ui and TanStack Start

1. Create a new TanStack app

To get started, you’ll need to create a new TanStack Start app. You can do that with the following command:

pnpm create @tanstack/start@latest

During the CLI setup, when it asks about add-ons, make sure to select:

Shadcn
Table
Query

These will give you the shadcn/ui setup and the TanStack Query + Table integrations we’ll use later.

2. Initial Cleanup

TanStack Start’s starter template comes with some demo routes and a header we don’t need.

Clean up the project as follows:

Remove the demo folder inside the src/routes directory (or wherever your router directory lives).
Delete Header.tsx from src/components.
Remove the Header import and usage from src/routes/__root.tsx.
Clean up the src/routes/index.tsx file to something minimal (or leave a simple landing page).

At this point, you can make the initial commit to your repo.

3. Setting Up shadcn/studio Blocks

Before we set up, let’s make sure you’re clear on what the shadcn/studio and Shadcn registries are.

What is shadcn/studio?

shadcn/studio is an open-source collection of copy-and-paste shadcn/ui components, blocks, and templates. It’s paired with a powerful shadcn theme generator to help you craft, customize, and ship faster.

What is Shadcn Registry?

A shadcn registry is a system for sharing and distributing reusable code assets such as UI components, hooks, and theme configurations across different projects. Running your own registry allows you to publish your custom components that others can then use. The registry uses a registry.json file to define and organize the components and their associated files.

If you want to know more about registries, you can refer to the official documentation here.

For quick building, we will use shadcn/studio’s free shadcn block – dashboard shell.

First, configure the registries in your components.json:

{
  // ...existing config
  "registries": {
    "@shadcn-studio": "https://shadcnstudio.com/r/{name}.json",
    "@ss-components": "https://shadcnstudio.com/r/components/{name}.json",
    "@ss-blocks": "https://shadcnstudio.com/r/blocks/{name}.json",
    "@ss-themes": "https://shadcnstudio.com/r/themes/{name}.json"
  }
}

If you face any issues while setting up, you can refer to the docs.

Install the Dashboard Shell Block

To get started, visit Shadcn blocks and navigate to the Dashboard and App section. Then select the Dashboard Shell 1 block (it’s free to use).

On the top-right, you’ll see a command to install the block into your project:

Copy that command, paste it into your terminal, and run it. This will install all the components needed for the dashboard layout (sidebar, header, dropdowns, and so on).

4. Routing Structure for the Dashboard

Next, we’ll set up the dashboard routes.

First, create a new layout route for /dashboard by adding a file at:

src/routes/dashboard.tsx

Then, inside a dashboard directory, create the three pages that will live under this layout:

src/routes/dashboard/index.tsx – main dashboard overview
src/routes/dashboard/products.tsx – products table page
src/routes/dashboard/settings.tsx – settings page

Your routes folder should look like this:

src/routes/
├── __root.tsx
├── index.tsx
├── dashboard.tsx          // Layout for all /dashboard/* pages
└── dashboard/
    ├── index.tsx          // /dashboard
    ├── products.tsx       // /dashboard/products
    └── settings.tsx       // /dashboard/settings

5. Creating the `/dashboard` Layout

This will set up the layout for the dashboard. Create src/routes/dashboard.tsx and paste:

file: src/routes/dashboard.tsx

import LanguageDropdown from '@/components/shadcn-studio/blocks/dropdown-language'
import ProfileDropdown from '@/components/shadcn-studio/blocks/dropdown-profile'
import { Avatar, AvatarImage } from '@/components/ui/avatar'
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator
} from '@/components/ui/breadcrumb'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import {
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
    SidebarTrigger
} from '@/components/ui/sidebar'
import { createFileRoute, Link, Outlet, useLocation } from '@tanstack/react-router'
import {
    FacebookIcon,
    InstagramIcon,
    LanguagesIcon,
    LayoutDashboard,
    LinkedinIcon,
    LogIn,
    Package,
    Settings,
    TwitterIcon,
    User2
} from 'lucide-react'
import React from 'react'

export const Route = createFileRoute('/dashboard')({
    component: DashboardLayout
})

function DashboardLayout() {
    const location = useLocation()
    const pathSegments = location.pathname.split('/').filter(Boolean)

    return (
        'flex min-h-dvh w-full'>
            
                
                    
                        
                            
                                
                                    "lg" asChild>
                                        "/">
                                            "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                                                "size-4" />
                                            
                                            "grid flex-1 text-left text-sm leading-tight">
                                                "truncate font-semibold">Your App
                                                "truncate text-xs">Dashboard
                                            
                                        
                                    
                                
                            
                        

                        
                            General
                            
                                
                                    
                                        
                                            '/dashboard'>
                                                
                                                Dashboard
                                            
                                        
                                    
                                    
                                        
                                            '/dashboard/products'>
                                                
                                                Products
                                            
                                        
                                    
                                    
                                        
                                            '/dashboard/settings'>
                                                
                                                Settings
                                            
                                        
                                    
                                
                            
                        
                    
                
                'flex flex-1 flex-col'>
                    'bg-card sticky top-0 z-50 border-b'>
                        'mx-auto flex max-w-7xl items-center justify-between gap-6 px-4 py-2 sm:px-6'>
                            'flex items-center gap-4'>
                                '[&_svg]:h-5 [&_svg]:w-5' />
                                'vertical' className='hidden h-4 sm:block' />
                                'hidden sm:block'>
                                    
                                        
                                            
                                                '/'>Home
                                            
                                        
                                        
                                        {pathSegments.map((segment, index) => {
                                            const path = `/${pathSegments.slice(0, index + 1).join('/')}`
                                            const isLast = index === pathSegments.length - 1
                                            const title = segment.charAt(0).toUpperCase() + segment.slice(1)

                                            return (
                                                
                                                    
                                                        {isLast ? (
                                                            {title}
                                                        ) : (
                                                            
                                                                as any}>{title}
                                                            
                                                        )}
                                                    
                                                    {!isLast && }
                                                
                                            )
                                        })}
                                    
                                
                            
                            'flex items-center gap-1.5'>
                                'ghost' size='icon'>
                                            
                                        
                                    }
                                />
                                'ghost' size='icon' className='h-10 w-10'>
                                            'h-10 w-10 rounded-md'>
                                                'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png' />
                                            
                                        
                                    }
                                />
                            
                        
                    
                    'mx-auto w-full max-w-7xl flex-1 px-4 py-6 sm:px-6'>
                        
                    
                    
                        'text-muted-foreground mx-auto flex w-full items-center justify-between gap-3 px-4 py-3 flex-col sm:flex-row sm:gap-6 sm:px-6'>
                            'text-sm text-center sm:text-left'>
                                {`©${new Date().getFullYear()}`}{' '}
                                '#' className='text-primary'>
                                    TanStack Start
                                
                                , Made for better web design
                            
                            'flex items-center gap-5'>
                                '#'>
                                    'h-4 w-4' />
                                
                                '#'>
                                    'h-4 w-4' />
                                
                                '#'>
                                    'h-4 w-4' />
                                
                                '#'>
                                    'h-4 w-4' />
                                
                            
                        
                    
                
            
        
    )
}

You now have a full layout for all /dashboard/* routes.

Let's break down the key parts of our dashboard layout:

Sidebar structure: The component wraps our navigation menu. Inside, we use and to create navigation links. Each menu item uses TanStack Router's component for type-safe navigation. We also have a header set up in the
Dynamic breadcrumbs: The breadcrumb section uses location.pathname to split the current URL into segments, then maps over them to create breadcrumb links. The isLast check ensures the final breadcrumb renders as plain text rather than a link.
Header actions: The header includes two dropdowns: for internationalization and for user account actions. These come from the shadcn/studio blocks we installed.
Outlet component: The component is where child routes (like /dashboard, /dashboard/products) will render. This makes our layout reusable across all dashboard pages. The layout uses Tailwind's utility classes for spacing, colors, and responsive behavior, making it easy to customize for your use case.

For more details regarding the Sidebar component, you can refer to the official docs here.

You now have a full layout for all /dashboard/* routes.

6. Building the Dashboard Home Page

Create src/routes/dashboard/index.tsx:

import { type Item } from '@/components/shadcn-studio/blocks/datatable-transaction'
import { createFileRoute } from '@tanstack/react-router'

import { Card } from '@/components/ui/card'

import SalesMetricsCard from '@/components/shadcn-studio/blocks/chart-sales-metrics'
import TransactionDatatable from '@/components/shadcn-studio/blocks/datatable-transaction'
import StatisticsCard from '@/components/shadcn-studio/blocks/statistics-card-01'
import ProductInsightsCard from '@/components/shadcn-studio/blocks/widget-product-insights'
import TotalEarningCard from '@/components/shadcn-studio/blocks/widget-total-earning'

import {
    CalendarX2Icon,
    TriangleAlertIcon,
    TruckIcon
} from 'lucide-react'

// Statistics card data
const StatisticsCardData = [
    {
        icon: 'h-4 w-4' />,
        value: '42',
        title: 'Shipped Orders',
        changePercentage: '+18.2%'
    },
    {
        icon: 'h-4 w-4' />,
        value: '8',
        title: 'Damaged Returns',
        changePercentage: '-8.7%'
    },
    {
        icon: 'h-4 w-4' />,
        value: '27',
        title: 'Missed Delivery Slots',
        changePercentage: '+4.3%'
    }
]

// Earning data for Total Earning card
const earningData = [
    {
        img: 'https://cdn.shadcnstudio.com/ss-assets/blocks/dashboard-application/widgets/zipcar.png',
        platform: 'Zipcar',
        technologies: 'Vuejs & HTML',
        earnings: '-$23,569.26',
        progressPercentage: 75
    },
    {
        img: 'https://cdn.shadcnstudio.com/ss-assets/blocks/dashboard-application/widgets/bitbank.png',
        platform: 'Bitbank',
        technologies: 'Figma & React',
        earnings: '-$12,650.31',
        progressPercentage: 25
    }
]

// Transaction table data
const transactionData: Item[] = [
    {
        id: '1',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png',
        avatarFallback: 'JA',
        name: 'Jack Alfredo',
        amount: 315.0,
        status: 'paid',
        email: 'jack@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '2',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-2.png',
        avatarFallback: 'MG',
        name: 'Maria Gonzalez',
        amount: 253.4,
        status: 'pending',
        email: 'maria.g@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '3',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png',
        avatarFallback: 'JD',
        name: 'John Doe',
        amount: 852.0,
        status: 'paid',
        email: 'john.doe@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '4',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-4.png',
        avatarFallback: 'EC',
        name: 'Emily Carter',
        amount: 889.0,
        status: 'pending',
        email: 'emily.carter@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '5',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png',
        avatarFallback: 'DL',
        name: 'David Lee',
        amount: 723.16,
        status: 'paid',
        email: 'david.lee@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '6',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-6.png',
        avatarFallback: 'SP',
        name: 'Sophia Patel',
        amount: 612.0,
        status: 'failed',
        email: 'sophia.patel@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '7',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-7.png',
        avatarFallback: 'RW',
        name: 'Robert Wilson',
        amount: 445.25,
        status: 'paid',
        email: 'robert.wilson@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '8',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-8.png',
        avatarFallback: 'LM',
        name: 'Lisa Martinez',
        amount: 297.8,
        status: 'processing',
        email: 'lisa.martinez@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '9',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-9.png',
        avatarFallback: 'MT',
        name: 'Michael Thompson',
        amount: 756.9,
        status: 'paid',
        email: 'michael.thompson@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '10',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-10.png',
        avatarFallback: 'AJ',
        name: 'Amanda Johnson',
        amount: 189.5,
        status: 'pending',
        email: 'amanda.johnson@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '11',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-11.png',
        avatarFallback: 'KB',
        name: 'Kevin Brown',
        amount: 1024.75,
        status: 'paid',
        email: 'kevin.brown@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '12',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-12.png',
        avatarFallback: 'SD',
        name: 'Sarah Davis',
        amount: 367.2,
        status: 'failed',
        email: 'sarah.davis@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '13',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-13.png',
        avatarFallback: 'CG',
        name: 'Christopher Garcia',
        amount: 598.45,
        status: 'processing',
        email: 'christopher.garcia@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '14',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-14.png',
        avatarFallback: 'JR',
        name: 'Jennifer Rodriguez',
        amount: 821.3,
        status: 'paid',
        email: 'jennifer.rodriguez@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '15',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-15.png',
        avatarFallback: 'DM',
        name: 'Daniel Miller',
        amount: 156.75,
        status: 'pending',
        email: 'daniel.miller@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '16',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-16.png',
        avatarFallback: 'NW',
        name: 'Nicole White',
        amount: 934.1,
        status: 'paid',
        email: 'nicole.white@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '17',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-17.png',
        avatarFallback: 'AL',
        name: 'Anthony Lopez',
        amount: 412.85,
        status: 'failed',
        email: 'anthony.lopez@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '18',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-18.png',
        avatarFallback: 'MH',
        name: 'Michelle Harris',
        amount: 675.5,
        status: 'processing',
        email: 'michelle.harris@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '19',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-19.png',
        avatarFallback: 'JC',
        name: 'James Clark',
        amount: 289.95,
        status: 'paid',
        email: 'james.clark@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '20',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-20.png',
        avatarFallback: 'RL',
        name: 'Rachel Lewis',
        amount: 1156.25,
        status: 'pending',
        email: 'rachel.lewis@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '21',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-21.png',
        avatarFallback: 'TY',
        name: 'Thomas Young',
        amount: 543.6,
        status: 'paid',
        email: 'thomas.young@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '22',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-22.png',
        avatarFallback: 'SB',
        name: 'Stephanie Brown',
        amount: 789.3,
        status: 'processing',
        email: 'stephanie.brown@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '23',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-23.png',
        avatarFallback: 'BM',
        name: 'Brandon Moore',
        amount: 425.75,
        status: 'failed',
        email: 'brandon.moore@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '24',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-24.png',
        avatarFallback: 'KT',
        name: 'Kelly Taylor',
        amount: 1203.5,
        status: 'paid',
        email: 'kelly.taylor@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '25',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-25.png',
        avatarFallback: 'MA',
        name: 'Mark Anderson',
        amount: 356.2,
        status: 'pending',
        email: 'mark.anderson@shadcnstudio.com',
        paidBy: 'visa'
    }
]

export const Route = createFileRoute('/dashboard/')({
    component: RouteComponent,
})

function RouteComponent() {
    return (
        'grid grid-cols-2 gap-6 lg:grid-cols-3'>
            {/* Statistics Cards */}
            'col-span-full grid gap-6 sm:grid-cols-3 md:max-lg:grid-cols-1'>
                {StatisticsCardData.map((card, index) => (
                    
                ))}
            

            'grid gap-6 max-xl:col-span-full lg:max-xl:grid-cols-2'>
                {/* Product Insights Card */}
                'justify-between gap-3 *:data-[slot=card-content]:space-y-5' />

                {/* Total Earning Card */}
                'Total Earning'
                    earning={24650}
                    trend='up'
                    percentage={10}
                    comparisonText='Compare to last year ($84,325)'
                    earningData={earningData}
                    className='justify-between gap-5 sm:min-w-0 *:data-[slot=card-content]:space-y-7'
                />
            

            'col-span-full xl:col-span-2 *:data-[slot=card-content]:space-y-6' />
            'col-span-full w-full py-0'>
                
            
        
    )
}

Our dashboard homepage uses various shadcn-studio blocks like:

Statistics cards display KPIs (Shipped Orders, Damaged Returns, and so on) with trend indicators. Each card receives props for the icon, value, title, and percentage change, making them reusable for any metric.
Chart components like use recharts under the hood to visualize data. The styling comes from shadcn/ui's card component and Tailwind utilities.
Transaction data table demonstrates TanStack Table integration. We pass an array of transaction objects, and the component handles rendering, sorting, and pagination. Notice how we use TypeScript's Item[] type for full type safety.

If you now navigate to /dashboard, you should see an admin dashboard with KPI statistics, charts, a dashboard, and a transaction table. Here is what it would look like:

We have built this beautiful dashboard quickly by using the shadcn/studio’s pre-built blocks.

7. Set up the Products Page.

Before building our products table, we need to install Zod, a TypeScript-first schema validation library. We'll use it to validate the data structure of requests to our server function.

Why Zod?

TanStack Start's server functions use Zod to ensure type-safe data transfer between client and server. When we request to fetch products, Zod validates that the request includes the correct types for page, pageSize, sortBy, and filters. This catches errors at runtime and provides excellent TypeScript inference.

Now, let’s set up the products page with a products table. But before that, let’s install the zod package dependency. Here is the command for it:

pnpm add zod

Creating Mock Product Data

We will need to store our mock products’ data somewhere. For that, we will create a new file data/products.ts and paste the code below. This will help us mock the product data for our products table.

import { createServerFn } from "@tanstack/react-start";
import { z } from "zod";

export type Product = {
    id: string
    name: string
    category: string
    price: number
    stock: number
    status: 'active' | 'draft' | 'archived'
    image: string
}

// Define the type for the data parameter
type ProductQueryParams = {
    page: number;
    pageSize: number;
    sortBy?: string;
    sortOrder?: "asc" | "desc";
    filters?: {
        name?: string;
        category?: string;
        status?: string;
    };
};

const products: Product[] = [
    {
        id: 'PROD-001',
        name: 'Wireless Noise Cancelling Headphones',
        category: 'Electronics',
        price: 299.99,
        stock: 45,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=100&q=80',
    },
    {
        id: 'PROD-002',
        name: 'Ergonomic Office Chair',
        category: 'Furniture',
        price: 199.50,
        stock: 12,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1592078615290-033ee584e267?w=100&q=80',
    },
    {
        id: 'PROD-003',
        name: 'Mechanical Gaming Keyboard',
        category: 'Electronics',
        price: 129.99,
        stock: 0,
        status: 'archived',
        image: 'https://images.unsplash.com/photo-1587829741301-dc798b91add1?w=100&q=80',
    },
    {
        id: 'PROD-004',
        name: 'Smart Fitness Watch',
        category: 'Wearables',
        price: 149.00,
        stock: 89,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=100&q=80',
    },
    {
        id: 'PROD-005',
        name: 'Minimalist Desk Lamp',
        category: 'Lighting',
        price: 45.00,
        stock: 23,
        status: 'draft',
        image: 'https://images.unsplash.com/photo-1507473888900-52e1ad14723b?w=100&q=80',
    },
    {
        id: 'PROD-006',
        name: 'Portable Bluetooth Speaker',
        category: 'Electronics',
        price: 79.99,
        stock: 150,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?w=100&q=80',
    },
    {
        id: 'PROD-007',
        name: 'Ceramic Coffee Mug Set',
        category: 'Kitchen',
        price: 24.99,
        stock: 200,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1514228742587-6b1558fcca3d?w=100&q=80',
    },
    {
        id: 'PROD-008',
        name: 'Leather Messenger Bag',
        category: 'Accessories',
        price: 129.50,
        stock: 15,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=100&q=80',
    },
    {
        id: 'PROD-009',
        name: 'Wireless Charging Pad',
        category: 'Electronics',
        price: 39.99,
        stock: 75,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1586816879360-004f5b0c51e3?w=100&q=80',
    },
    {
        id: 'PROD-010',
        name: 'Succulent Plant Set',
        category: 'Home & Garden',
        price: 29.99,
        stock: 30,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1485955900006-10f4d324d411?w=100&q=80',
    },
    {
        id: 'PROD-011',
        name: 'Professional Chef Knife',
        category: 'Kitchen',
        price: 89.95,
        stock: 42,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1593618998160-e34014e67546?w=100&q=80',
    },
    {
        id: 'PROD-012',
        name: 'Yoga Mat',
        category: 'Fitness',
        price: 35.00,
        stock: 100,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1601925260368-ae2f83cf8b7f?w=100&q=80',
    },
    {
        id: 'PROD-013',
        name: 'Smart Thermostat',
        category: 'Home Automation',
        price: 199.00,
        stock: 0,
        status: 'archived',
        image: 'https://images.unsplash.com/photo-1567789884554-0b844b597180?w=100&q=80',
    },
    {
        id: 'PROD-014',
        name: 'Vintage Film Camera',
        category: 'Photography',
        price: 450.00,
        stock: 3,
        status: 'draft',
        image: 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=100&q=80',
    },
    {
        id: 'PROD-015',
        name: 'Cotton T-Shirt Pack',
        category: 'Apparel',
        price: 49.99,
        stock: 150,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=100&q=80',
    },
    {
        id: 'PROD-016',
        name: 'Electric Toothbrush',
        category: 'Personal Care',
        price: 69.99,
        stock: 55,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1559656914-a30970c1affd?w=100&q=80',
    },
    {
        id: 'PROD-017',
        name: 'Gaming Mouse',
        category: 'Electronics',
        price: 59.99,
        stock: 88,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1527864550417-7fd91fc51a46?w=100&q=80',
    },
    {
        id: 'PROD-018',
        name: 'Essential Oil Diffuser',
        category: 'Home & Garden',
        price: 34.50,
        stock: 25,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1602928321679-560bb453f190?w=100&q=80',
    },
    {
        id: 'PROD-019',
        name: 'Running Shoes',
        category: 'Footwear',
        price: 119.99,
        stock: 60,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=100&q=80',
    },
    {
        id: 'PROD-020',
        name: 'Digital Drawing Tablet',
        category: 'Electronics',
        price: 249.00,
        stock: 18,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1561525140-c2a4cc68e4bd?w=100&q=80',
    },
    {
        id: 'PROD-021',
        name: 'Bamboo Cutting Board',
        category: 'Kitchen',
        price: 22.99,
        stock: 95,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1594385208974-2e75f8d7bb48?w=100&q=80',
    },
    {
        id: 'PROD-022',
        name: 'Sunglasses',
        category: 'Accessories',
        price: 159.00,
        stock: 40,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1511499767150-a48a237f0083?w=100&q=80',
    },
    {
        id: 'PROD-023',
        name: 'Water Bottle',
        category: 'Fitness',
        price: 19.99,
        stock: 300,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1602143407151-01114192003f?w=100&q=80',
    },
    {
        id: 'PROD-024',
        name: 'Throw Pillow Set',
        category: 'Home Decor',
        price: 45.99,
        stock: 28,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1584100936595-c0654b55a2e6?w=100&q=80',
    },
    {
        id: 'PROD-025',
        name: 'Wireless Earbuds',
        category: 'Electronics',
        price: 89.99,
        stock: 120,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1590658268037-6bf12165a8df?w=100&q=80',
    }
]

export const getProducts = createServerFn({ method: "GET" })
    .inputValidator(
        z.object({
            page: z.number().default(0),
            pageSize: z.number().default(10),
            sortBy: z.string().optional(),
            sortOrder: z.enum(["asc", "desc"]).optional(),
            filters: z
                .object({
                    name: z.string().optional(),
                    category: z.string().optional(),
                    status: z.string().optional(),
                })
                .optional(),
        })
    )
    .handler(async ({ data }: { data: ProductQueryParams }) => {
        const { page, pageSize, sortBy, sortOrder, filters } = data;

        // Apply filters
        let filteredProducts = [...products];

        if (filters) {
            if (filters.name) {
                filteredProducts = filteredProducts.filter((product) =>
                    product.name.toLowerCase().includes(filters.name!.toLowerCase())
                );
            }

            if (filters.category) {
                filteredProducts = filteredProducts.filter(
                    (product) =>
                        product.category.toLowerCase() === filters.category!.toLowerCase()
                );
            }

            if (filters.status) {
                filteredProducts = filteredProducts.filter(
                    (product) => product.status === filters.status
                );
            }
        }

        // Apply sorting
        if (sortBy) {
            filteredProducts.sort((a, b) => {
                const aValue = a[sortBy as keyof Product];
                const bValue = b[sortBy as keyof Product];

                if (typeof aValue === "string" && typeof bValue === "string") {
                    return sortOrder === "desc"
                        ? bValue.localeCompare(aValue)
                        : aValue.localeCompare(bValue);
                }

                if (typeof aValue === "number" && typeof bValue === "number") {
                    return sortOrder === "desc" ? bValue - aValue : aValue - bValue;
                }

                return 0;
            });
        }

        // Calculate pagination
        const totalCount = filteredProducts.length;
        const totalPages = Math.ceil(totalCount / pageSize);
        const paginatedProducts = filteredProducts.slice(
            page * pageSize,
            (page + 1) * pageSize
        );

        // Simulate network delay
        await new Promise((resolve) => setTimeout(resolve, 500));

        return {
            products: paginatedProducts,
            pagination: {
                page,
                pageSize,
                totalCount,
                totalPages,
            },
        };
    });

Let’s understand the server function and break down what's happening in getProducts:

Input validation: The .inputValidator() method uses a Zod schema to validate incoming requests. It ensures page and pageSize are numbers, sortOrder is either "asc" or "desc", and filters are optional strings.
Filtering products: The function filters the products array based on the provided filters (name, category, status). This simulates what a real database query would do.
Sorting: Products are sorted by the specified column (sortBy) in ascending or descending order (sortOrder).
Pagination: We calculate which slice of products to return based on page and pageSize, along with metadata like totalCount and totalPages.

Create the Products table:

Once the data is done, let’s create a table in /dashboard/products.tsx. This table will use our mock product data and will provide multiple functions in the table, like search, sort, and filter. This table demonstrates the powerful combination of TanStack Query for data management and TanStack Table for rendering.

Paste the code below in the products.tsx file:

import { useQuery } from '@tanstack/react-query'
import { createFileRoute } from '@tanstack/react-router'
import {
    ColumnDef,
    ColumnFiltersState,
    flexRender,
    getCoreRowModel,
    getFilteredRowModel,
    getPaginationRowModel,
    getSortedRowModel,
    SortingState,
    useReactTable,
    VisibilityState,
} from '@tanstack/react-table'
import {
    ArrowUpDown,
    ChevronDown,
    Filter,
    Loader2,
    MoreHorizontal,
    Plus,
    Search
} from 'lucide-react'
import { useState } from 'react'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Input } from '@/components/ui/input'
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table'
import { getProducts, type Product } from '@/data/products'

export const Route = createFileRoute('/dashboard/products')({
    component: ProductsPage,
})

export const columns: ColumnDef[] = [
    {
        accessorKey: 'name',
        header: ({ column }) => {
            return (
                
            )
        },
        cell: ({ row }) => (
            "flex items-center gap-3">
                'name')}
                    className="h-10 w-10 rounded-md object-cover"
                />
                "flex flex-col">
                    "font-medium">{row.getValue('name')}
                    "text-xs text-muted-foreground">{row.original.id}
                
            
        ),
    },
    {
        accessorKey: 'category',
        header: 'Category',
        cell: ({ row }) => {row.getValue('category')},
    },
    {
        accessorKey: 'status',
        header: 'Status',
        cell: ({ row }) => {
            const status = row.getValue('status') as string
            return (
                'active' ? 'default' : status === 'draft' ? 'secondary' : 'outline'}>
                    {status}
                
            )
        },
    },
    {
        accessorKey: 'price',
        header: () => "text-right">Price,
        cell: ({ row }) => {
            const amount = parseFloat(row.getValue('price'))
            const formatted = new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD',
            }).format(amount)

            return "text-right font-medium">{formatted}
        },
    },
    {
        accessorKey: 'stock',
        header: () => "text-right">Stock,
        cell: ({ row }) => {
            const stock = parseFloat(row.getValue('stock'))
            return ${stock === 0 ? 'text-red-500 font-medium' : ''}`}>{stock}
        },
    },
    {
        id: 'actions',
        enableHiding: false,
        cell: ({ row }) => {
            const product = row.original

            return (
                
                    
                        
                    
                    "end">
                        Actions
                         navigator.clipboard.writeText(product.id)}
                        >
                            Copy Product ID
                        
                        
                        Edit Product
                        View Details
                    
                
            )
        },
    },
]

function ProductsPage() {
    const [sorting, setSorting] = useState([])
    const [columnFilters, setColumnFilters] = useState([])
    const [columnVisibility, setColumnVisibility] = useState({})
    const [rowSelection, setRowSelection] = useState({})
    const [pagination, setPagination] = useState({
        pageIndex: 0,
        pageSize: 10,
    })

    const { data, isLoading } = useQuery({
        queryKey: ['products', pagination, sorting, columnFilters],
        queryFn: () => getProducts({
            data: {
                page: pagination.pageIndex,
                pageSize: pagination.pageSize,
                sortBy: sorting[0]?.id,
                sortOrder: sorting[0]?.desc ? 'desc' : 'asc',
                filters: {
                    name: (columnFilters.find((f) => f.id === 'name')?.value as string) || undefined,
                    status: (columnFilters.find((f) => f.id === 'status')?.value as string) || undefined,
                }
            }
        }),
    })

    const products = data?.products || []
    const totalPages = data?.pagination.totalPages || 0
    const totalCount = data?.pagination.totalCount || 0

    const table = useReactTable({
        data: products,
        columns,
        pageCount: totalPages,
        manualPagination: true,
        manualSorting: true,
        manualFiltering: true,
        onSortingChange: setSorting,
        onColumnFiltersChange: setColumnFilters,
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
        onColumnVisibilityChange: setColumnVisibility,
        onRowSelectionChange: setRowSelection,
        onPaginationChange: setPagination,
        state: {
            sorting,
            columnFilters,
            columnVisibility,
            rowSelection,
            pagination,
        },
    })

    return (
        "w-full space-y-4">
            "flex items-center justify-between">
                "text-2xl font-bold tracking-tight">Products
                "flex items-center gap-2">
                    
                    
                
            

            
                
                    Product Management
                    
                        Manage your product catalog, track inventory, and update prices.
                    
                
                
                    "flex items-center py-4 gap-2">
                        "relative flex-1">
                            "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                            "Filter products..."
                                value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
                                onChange={(event) =>
                                    table.getColumn("name")?.setFilterValue(event.target.value)
                                }
                                className="pl-8 max-w-sm"
                            />
                        
                        
                            
                                
                            
                            "end">
                                {table
                                    .getAllColumns()
                                    .filter((column) => column.getCanHide())
                                    .map((column) => {
                                        return (
                                            "capitalize"
                                                checked={column.getIsVisible()}
                                                onCheckedChange={(value) =>
                                                    column.toggleVisibility(!!value)
                                                }
                                            >
                                                {column.id}
                                            
                                        )
                                    })}
                            
                        
                    
                    "rounded-md border">
                        
                                {table.getHeaderGroups().map((headerGroup) => (
                                    
                                        {headerGroup.headers.map((header) => {
                                            return (
                                                
                                                    {header.isPlaceholder
                                                        ? null
                                                        : flexRender(
                                                            header.column.columnDef.header,
                                                            header.getContext()
                                                        )}
                                                
                                            )
                                        })}
                                    
                                ))}
                            
                                {isLoading ? (
                                    
                                        "h-24 text-center">
                                            "flex items-center justify-center gap-2">
                                                "h-6 w-6 animate-spin" />
                                                Loading products...
                                            
                                        
                                    
                                ) : table.getRowModel().rows?.length ? (
                                    table.getRowModel().rows.map((row) => (
                                        "selected"}
                                        >
                                            {row.getVisibleCells().map((cell) => (
                                                
                                                    {flexRender(
                                                        cell.column.columnDef.cell,
                                                        cell.getContext()
                                                    )}
                                                
                                            ))}
                                        
                                    ))
                                ) : (
                                    
                                        "h-24 text-center"
                                        >
                                            No results.
                                        
                                    
                                )}
                            
                            
                            
                        
                    
                    "flex items-center justify-end space-x-2 py-4">
                        "flex-1 text-sm text-muted-foreground">
                            {table.getFilteredSelectedRowModel().rows.length} of{" "}
                            {totalCount} row(s) selected.
                        
                        "space-x-2">
                            
                            
                        
                    
                
            
        
    )
}

Now you can see the fully functional products page by navigating the /products where you can search and sort the products.

How do TanStack Query and TanStack Table Work in the products table?

Our products page uses TanStack Query for data fetching and TanStack Table for rendering.

useQuery is a fundamental hook in TanStack Query for managing server state in web applications. It simplifies data fetching, caching, and synchronization.

The below code snippet below shows how we have used useQuery in our product table:

import { useQuery } from '@tanstack/react-query';

const { data, isLoading } = useQuery({
    queryKey: ['products', pagination, sorting, columnFilters],
    queryFn: () => getProducts({...})
}

The useQuery hook manages data fetching in our application. For more details, you can refer to the official docs here.

useReactTable:

import { useReactTable } from '@tanstack/react-table'

const table = useReactTable({
    data: products,
    columns,
    manualPagination: true,
    manualSorting: true,
    manualFiltering: true,
})

TanStack Table manages the UI state and rendering. By setting manualPagination, manualSorting, and manualFiltering to true, we tell the table that server-side logic handles these operations.

When users sort, filter, or paginate, the table updates its states, and React Query detects the state change in the queryKey. It refetches data from the server, and the table re-renders with fresh data.

This architecture is production-ready and scales to thousands of rows. You just need to replace the mock API endpoint with your real API endpoint.

8. Settings Page

Finally, let’s add a simple Settings page with a profile section and some basic notification preferences.

Below is the code for the Settings Page. You can paste it into /dashboard/settings.tsx:

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/dashboard/settings')({
  component: SettingsPage,
})

function SettingsPage() {
  return (
    "space-y-6">
      
        "text-lg font-medium">Settings
        "text-sm text-muted-foreground">
          Manage your account settings and set e-mail preferences.
        
      
      

      "grid gap-6">
        
          
            Profile
            
              This is how others will see you on the site.
            
          
          "space-y-4">
            "flex items-center gap-4">
              "h-20 w-20">
                "https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png" />
                JD
              
              
            
            "space-y-1">
              "username" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Username
              "username" defaultValue="jdoe" />
            
            "space-y-1">
              "email" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Email
              "email" defaultValue="john.doe@example.com" />
            
            "space-y-1">
              "bio" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Bio
              "bio" placeholder="Tell us a little bit about yourself" />
            
          
          
            
          
        

        
          
            Notifications
            
              Configure how you receive notifications.
            
          
          "space-y-4">
            "flex items-center justify-between rounded-lg border p-4">
              "space-y-0.5">
                "text-base font-medium">Communication emails
                "text-sm text-muted-foreground">
                  Receive emails about your account activity.
                
              
              {/* Toggle would go here, using a simple checkbox for now */}
              
            
            "flex items-center justify-between rounded-lg border p-4">
              "space-y-0.5">
                "text-base font-medium">Marketing emails
                "text-sm text-muted-foreground">
                  Receive emails about new products, features, and more.
                
              
              
            
          
          
            
          
        
      
    
  )
}

In this page, we have created two sections:

Profile Section
Notification Section

These two sections have been built using shadcn/ui components like Card, Footer, Checkbox, Avatar, Input, and so on.

At this point, we have:

A dashboard layout with sidebar, header, breadcrumbs, and footer
A Dashboard page with charts, insights, and a transaction table
A Products page powered by:
- TanStack Start server functions
- TanStack Query
- TanStack Table
A clean Settings page using shadcn/ui components

Live Demo & Source Code

You can check out the full source code on GitHub here:

GitHub Repository: https://github.com/themeselection/tanstack-dashboard-demo
Live Demo: https://tanstack-dashboard-demo.vercel.app/dashboard

Feel free to clone, experiment, and extend it to fit your own application needs!

Summary

Congratulations! You've built a complete, production-ready admin dashboard using TanStack Start, TanStack Table, TanStack Query, Shadcn/ui, and shadcn/studio.

Throughout this tutorial, you’ve gained some hands-on experience in:

Full-stack application development with type safety: We’ve developed a full-stack application with TanStack Start's server functions with Zod validation to create type-safe APIs.
Advanced data fetching: We’ve implemented TanStack Query for data fetching with automatic caching and background updates.
Complex table interactions: We’ve built feature-rich data tables with TanStack Table, including server-side pagination, sorting, and filtering.
Building UI quicker: We’ve leveraged shadcn/ui and shadcn/studio blocks to quickly build polished interfaces.
Responsive layouts: And we’ve created adaptive designs that work seamlessly from mobile to desktop

What’s Next?

Now that you have a solid foundation, consider implementing some or all of the below features if you want to work more on this:

Authentication: Add user authentication with Clerk, NextAuth, or Auth.js
Real database: Replace mock data with Prisma + PostgreSQL or Drizzle + SQLite
Form validation: Integrate React Hook Form with Zod for robust form handling
Theming: Implement dark mode and custom color schemes using shadcn/ui's theming system
API routes for CRUD: Add CRUD operations for products (create, update, delete)
Internationalization: Make the dashboard compatible with multiple languages by integrating internationalization.

We shipped a scalable and production-ready dashboard much faster than starting from scratch. Hope you enjoyed the process – and thanks for reading!

Ajay Patel - freeCodeCamp.org

How to Use Flex in Tailwind CSS and Justify Flex Items

Table of Contents

Prerequisites

What is Flexbox?

How Tailwind CSS Makes Flexbox Easy to Use

How to Use Flex in Tailwind

Flex Item Sizing: Basis, Grow, & Shrink

flex-basis

flex-grow

flex-shrink

Controlling Flex Direction

flex-row

flex-row-reverse

flex-col

flex-col-reverse

Responsive Control

Fine-Tuning Flexbox Layout

flex-wrap

flex-order

gap

Responsive Design

How to Justify and Align Flex Items in Tailwind

justify-content

Align Items

Practice Flexbox with Interactive Games

Flexbox Froggy

Flexbox Adventure (Coding Fantasy)

Conclusion

How Does an MCP Work Under the Hood? MCP Workflow Explained

Table of Contents

MCP Server: A-Z of Model Context Protocol

What is MCP (Model Context Protocol)?

Architecture of MCP

MCP Host

MCP Client

MCP Server

Transport Layer

How Does MCP Work?

Step #1 - Tool Discovery

Step #2 - Understanding Your Requirement

Step #3 - Ask for Permission

Step #4 - Querying the Database

Step #5 - Sending the Email

Step #6 - Natural Answer

MCP vs RAG

MCP vs A2A

Resources

Conclusion

How to Build an Admin Dashboard with shadcn/ui and TanStack Start

Table of Contents

Prerequisites

What we will build

Why TanStack Start?

Why shadcn/ui?

How to Build the Admin Dashboard Using shadcn/ui and TanStack Start

1. Create a new TanStack app

2. Initial Cleanup

3. Setting Up shadcn/studio Blocks

What is shadcn/studio?

What is Shadcn Registry?

Install the Dashboard Shell Block

4. Routing Structure for the Dashboard

5. Creating the /dashboard Layout

6. Building the Dashboard Home Page

7. Set up the Products Page.

Why Zod?

Creating Mock Product Data

Create the Products table:

"text-2xl font-bold tracking-tight">Products

How do TanStack Query and TanStack Table Work in the products table?

8. Settings Page

"text-lg font-medium">Settings

Live Demo & Source Code

Summary

What’s Next?

Resources:

5. Creating the `/dashboard` Layout