app/(app) route group in shadcn-ui/ui
Tags: javascript, opensource, shadcnui, nextjs
Published: 2024-05-30 21:57:38

You can tell shadcn-ui/ui is built using app router by looking at its folder structure inside [apps/www](https://github.com/shadcn-ui/ui/tree/main/apps/www/app).

![](https://media.licdn.com/dms/image/D4E12AQF7JaYQopBMMA/article-inline_image-shrink_1500_2232/0/1716839729093?e=1722470400&v=beta&t=hT-nU1xbeRVdOdzKz468FBi9pVKZ1aVnml5gD7L3qQA)

since the folder name inside [app](https://github.com/shadcn-ui/ui/tree/main/apps/www/app) is (app) , in Next.js, this means that this folder is a [route group](https://nextjs.org/docs/app/building-your-application/routing/route-groups).

### Route Groups

In the app directory, nested folders are normally mapped to URL paths. However, you can mark a folder as a Route Group to prevent the folder from being included in the route's URL path.

> [_Build shadcn-ui/ui from scratch._](https://tthroo.com/)

This allows you to organize your route segments and project files into logical groups without affecting the URL path structure.

Route groups are useful for:

*   [Organizing routes into groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups#organize-routes-without-affecting-the-url-path) e.g. by site section, intent, or team.
*   Enabling [nested layouts](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts) in the same route segment level:
*   [Creating multiple nested layouts in the same segment, including multiple root layouts](https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)
*   [Adding a layout to a subset of routes in a common segment](https://nextjs.org/docs/app/building-your-application/routing/route-groups#opting-specific-segments-into-a-layout)

Next.js docs provide the following examples, be sure to check them out:

1.  [Organize routes without affecting the URL path](https://nextjs.org/docs/app/building-your-application/routing/route-groups#organize-routes-without-affecting-the-url-path)
2.  [Opting specific segments into a layou](https://nextjs.org/docs/app/building-your-application/routing/route-groups#opting-specific-segments-into-a-layout)t
3.  [Creating multiple root layouts](https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)

Shadcn-ui/ui leverages route group to share the common layout among docs, components, themes, examples, blocks pages.

![](https://media.licdn.com/dms/image/D4E12AQFPIAPJUX6rmw/article-inline_image-shrink_1500_2232/0/1716839729173?e=1722470400&v=beta&t=FFOxgTQWiGF9LKoxMBHzu552jHoqy-JADYHhIHpyFT4)

Common layout in this case is the header and footer that can be found in [components folder](https://github.com/shadcn-ui/ui/tree/main/apps/www/components).

### site-footer.tsx

![](https://media.licdn.com/dms/image/D4E12AQEOhWijrRkPdA/article-inline_image-shrink_1000_1488/0/1716839730490?e=1722470400&v=beta&t=3KSwaYRZnmT7UgBR0naS2PWmdGflyLZmgxZcUH-gxUs)

### site-header.tsx

![](https://media.licdn.com/dms/image/D4E12AQH9zvnQoV13LA/article-inline_image-shrink_1000_1488/0/1716839729851?e=1722470400&v=beta&t=FBnUsRzCamBn3r-jz7XM0ZCx7u5BCzgJgMbdUuXT8TE)

### About me:

Website: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

Email: ramu.narasinga@gmail.com

### References:

1.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx)
2.  [https://github.com/shadcn-ui/ui/tree/main/apps/www/components](https://github.com/shadcn-ui/ui/tree/main/apps/www/components)
3.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-footer.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-footer.tsx)
4.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-header.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-header.tsx)
5.  [https://nextjs.org/docs/app/building-your-application/routing/route-groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups)