Exploring the shadcn/ui next-template Project Structure

[00:00 - 00:12] In this lesson, it will explore the shadcenui next template, project structure. The template includes a structure that aims in maintaining or in organizing next.js project.

[00:13 - 00:31] It has an app folder with a layout and page files, a components folder with UI, right now it includes only a button, any shadcenui component will go there, icons, navigation, header, a tailwind indicator which is this part that shows the screen size. You can see it changed.

[00:32 - 00:45] The theme provider and the theme toggle that we are going to talk about it in a second. We have the public folder for public file, the config folder for configuration objects, the styles folder for CSS files and the types folder for TypeScript types.

[00:46 - 00:52] Looking at the app folder, we are seeing two files, the layout and the page. It's next.js convention file.

[00:53 - 01:08] The page.js imverses a straightforward routing convention with its app directory and the framework uses specific file names to define the right aspects of a route UI and behavior. The page.js.x for example is the route content.

[01:09 - 01:16] The layout will be the route layout. There is a loading.js file and a route.js file that we will use throughout the course.

[01:17 - 01:29] The loading show a loading state for the route and a route file is the server handler for API calls. These are key for the project and you can explore them the full list available in the next.js documentation.

[01:30 - 01:38] The reasoning below. And there is the default arrow, instrumentation, layout, etc.

[01:39 - 01:44] You can look at them as well. Nested folders create nested routes for example.

[01:45 - 01:54] This structure create an auth login route. Create the app create a new folder called auth and create a page.js.x file.

[01:55 - 02:06] Then inside the auth folder create a login folder with a page.js.x inside. You will be able to go to the browser and navigate to auth/login.

[02:07 - 02:12] Let's talk about the UI directory. Under component, you will save all the reusable UI pieces.

[02:13 - 02:21] By default, Chatsen UI installs its component under the UI directory. This will act as the repository of a presentational component.

[02:22 - 02:31] Container components that combine multiple presentational components or are connected to the application state will be also the standard component library. You can go ahead and organize it the way you like.

[02:32 - 02:37] It's very flexible. Let's talk about the dark theme.

[02:38 - 02:45] Chatsen UI has a powerful theming support going behind just the dark theme. You will learn more about it in module 3.

[02:46 - 02:55] The template itself comes with a spatial component for toggling between dark and light themes. Under the boot, it uses the next themes to handle theme switching.

[02:56 - 03:02] Let's look at the theme toggle file. You can notice the use of the dark modifier here.

[03:03 - 03:21] Any class that comes after the dark modifier will only be applied when the user switches to dark mod. Here is the theme toggle component in action.

[03:22 - 03:29] The library directory contains any site-wide used functions or utilities. For example, a formatter module would fit well here.

[03:30 - 03:36] Currently, it hosts the fonts and the utils files. The CNUT.

[03:37 - 03:47] The CNUT is a function that makes between the CLCX and Telo in merge utilities. CLCX helps in picking class names based on some conditions.

[03:48 - 03:57] Telo in merge serves out conflict in styles, especially with Telo in CSS. They work together in CN in the CNUT to make handling styles simpler.

[03:58 - 04:12] CLCX alone sometimes struggle with Telo in Zorder, for instance. If the BGBL500 class name is set first, it won't change to BGGRACE600 even its desired when disabled.

[04:13 - 04:17] This is because our CSS layering works. With Telo in merge, this can be fixed.

[04:18 - 04:29] Telo in merge checkers the CLCX output and merge the styles right away, so the BGGRACE 600 will show up as accepted in the disabled button. Let's see how it can be used.

[04:30 - 04:45] After creating a new button component, import the CN function from lib/utils. Then export the const button that will receive the disabled prop and the rest of the props will be spreaded.

[04:46 - 04:59] You can immediately return a button, a native one and define a class name. Install the CN function with BGBL500 and pass a disabled condition.

[05:00 - 05:07] It will put a BGGRACE600 class name into it. Then return the rest of the props to the button.

[05:08 - 05:22] It will also receive children, so we can render them under the button. The CN function will apply the disabled property if disabled = true.

[05:23 - 05:37] This makes customizing UI components way easier, because we can also pass a class name. We can pass a class name to the function and we will override any existing styles from the parent component.

[05:38 - 05:47] So we will use the component to adjust the button. Then enter class name, if I pass BGORANGE.

[05:48 - 05:59] Here it will override all the two defined class names. The config directory contains any site-wide used configuration or setup files.

[06:00 - 06:10] You can put your const and file here for example and by default it includes the site.tsv. It is a simple configuration file for the site itself with names, links and icons.

[06:11 - 06:14] In the next lesson you will learn about the shadcny command line tool.