The template includes a structure that aids in maintaining organization with 

Next.js embraces a straightforward routing convention with its 

 directory, and the framework uses specific file names to define various aspects of a route's UI and behavior:

These are key for the projects, and you can explore the full list of available files via the 

Nested folders create nested routes as well.
This structure, for example, will create an /auth/login route:

├── app
│   └── auth
│     └── page.tsx

Nested folders create nested routes as well. This structure, for example, will create an 

├── app
│   └── auth
│     └── login
│       └── page.tsx

, you will host all the reusable UI pieces.

By default, shadcn/ui installs its components under the 

 directory. This will act as the repository of presentational components.

Presentational components are components that are not connected to the application state,
and render data they receive from their parents.

Container components that combine multiple presentational components or are connected to the application state (Container) will be hosted under the component library.

These concepts are an evolution of a quite old CSS concept called the 

.
For those new to web development, it's valuable to just know what it is.

Atomic design is a methodology composed of five distinct stages working together to create interface design systems more deliberately and hierarchically. The five stages of atomic design are Atoms, Molecules, Organisms, Templates, and Pages.

---
title: Exploring the shadcn/ui next-template Project Structure
description: Learn about the project structure of the shadcn/ui next-template and how it's organized.
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-sleek-web-applications-with-shadcn-ui-app/-/tree/main/newsly/03.02-typography?ref_type=heads
privateVideoUrl: https://stream.mux.com/ACLRczzkxJH0119UOA6vJd1TtAPcuYHgn700KmU6fjswI.m3u8
---

The template includes a structure that aids in maintaining organization with **Next.js** projects.

    ├── app
    │   └── layout.tsx
    |   └── page.tsx
    ├── components
    │   └── ui
    │       └── Button.tsx
    |   icons.tsx
    |   site-header.tsx
    |   main-nav.tsx
    |   tailwind-indiactor.tsx
    |   theme-provider.tsx
    |   theme-toggle.tsx
    ├── config
    │   └── site.ts
    ├── lib
    │   └── fonts.ts
    │   └── utils.ts
    ├── public
    ├── styles
    ├── types

Some configuration files include the `next.config.mjs`, `tailwind.config.js`, and `package.json` files.

### Next.js Conventions

Next.js embraces a straightforward routing convention with its `app` directory, and the framework uses specific file names to define various aspects of a route's UI and behavior:

-   page.tsx - The route content
-   layout.tsx - The route layout
-   loading.tsx - Loading state for the route
-   route.ts - A server handler for API calls

These are key for the projects, and you can explore the full list of available files via the [Next.js documentation](https://nextjs.org/docs/app/api-reference/file-conventions).

Nested folders create nested routes as well.
This structure, for example, will create an /auth/login route:

    ├── app
    │   └── auth
    │     └── page.tsx

Nested folders create nested routes as well. This structure, for example, will create an `/auth/login` route:

    ├── app
    │   └── auth
    │     └── login
    │       └── page.tsx

### The UI Directory

Under `/components`, you will host all the reusable UI pieces.

By default, shadcn/ui installs its components under the `ui` directory. This will act as the repository of presentational components.

:::note

Presentational components are components that are not connected to the application state,
and render data they receive from their parents.

:::

Container components that combine multiple presentational components or are connected to the application state (Container) will be hosted under the component library.

These concepts are an evolution of a quite old CSS concept called the [`Atomic Design`](https://atomicdesign.bradfrost.com/chapter-2), developed by `Brad Frost` and `Dave Olsen`.
For those new to web development, it's valuable to just know what it is.

> Atomic design is a methodology composed of five distinct stages working together to create interface design systems more deliberately and hierarchically. The five stages of atomic design are Atoms, Molecules, Organisms, Templates, and Pages.

Eyal Cohen

Learn about the project structure of the shadcn/ui next-template and how it's organized.

Exploring the shadcn/ui next-template Project Structure

In this lesson, it will explore the shadcnyy next template, project structure.

The template includes a structure that aims in maintaining or in organizing

It has enough folder with a layout and page files.

A components folder with UI, right now it includes only a button.

Icons, navigation, header, a tailwind indicator which is this part that shows

The theme provider and the theme toggle that we are going to talk about it in a

We have the public folder for public file, the config folder for configuration

the styles folder for CSS files and the types folder for TypeScript types.

Looking at the app folder, we are seeing two files, the layout and the page.

The page.js imverses a straightforward routing convention with its app

framework uses specific file names to define the right aspects of a route UI

The page.js6, for example, is the route content.

There is a loading.js file and a route.js file that we will use throughout the

The loading show a loading state for the route and a route file is the server

These are key for the project and you can explore them the full list available

And there is the default arrow, instrumentation, layout, etc.

Nested folders create nested routes, for example.

This structure create an auth login around.

Create the app create a new folder called auth and create a page.js6 file

Then inside the auth folder create a login folder with a page.js6 inside.

You will be able to go to the browser and navigate to auth/login.

Under component, you will save all the reusable UI pieces.

By default, Chatsen UI installs its component under the UI directory.

This will act as the repository of the presentational component.

Container components that combine multiple presentational components or are

to the application state will be also the standard component library.

You can go ahead and organize it the way you like.

Chatsen UI has a powerful theming support going behind just the dark theme.

You will learn more about it in module 3.

The template itself comes with a spatial component for toggling between dark

Under the wood, it uses the next themes to handle theme switching.

And you can notice the use of the dark modifier here.

Any class that comes after the dark modifier will only be applied when the user

Here is the theme toggle component in action.

The library directory contains any site-wide used functions or utilities.

For example, a formatter module would fit well here.

Currently, it hosts the fonts and the utils files.

The CNUTil is a function that makes between the CLCX and tailwind merge

CLCX helps in picking class names based on some conditions.

Tailwind merge sorts out conflict in styles, especially with tailwind CSS.

They work together in CN in the CNUTil to make handling styles simpler.

CLCX alone sometimes struggle with tailwinds order, for instance.

If the BgBlue500 class name is set first, it won't change to Bgigray600 if even

Tailwind merge checkers the CLCX output and merge the styles right away, so the

will show up as accepted in the disabled button.

We're creating a new button component, import the CN function from lib/utils.

Then export the default const button and it got the next button that will

disabled prop and the rest of the props will be spreaded.

You can immediately return a button, a native one and define a class name.

Call the CN function with BgBlue500 and pass a disabled condition.

It will put a BgGray600 class name into it.

Then return the rest of the props to the button.

We'll also receive children, so we can render them under the button.

The CN function will apply the disabled property if disabled = true.

This makes customizing UI components way easier because we can also pass a

We can pass a class name to the function and we'll do lower right any existing

So we'll use the component, I can just pass the button.

Here it will override all the two defined class names.

The config directory contains any site wide used configuration or setup files.

You can put your constants file here for example and by default it includes the

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript