In this video, I'm building this entire

landing page from scratch, and it's

going to look insane. We're talking

responsive navbar, hero section that

converts, logos, sliding carousel,

interactive gallery with moving cards,

pricing section that actually sells,

testimonials that build trust, a contact

form that doesn't suck, and a footer

that ties everything together. All built

with Shhat CM blocks. No AI tokens

burned. Are you ready? Let's go. We are

starting from the sheden documentation.

And this is the way how I'm starting all

my new projects nowadays. So we are

going to this new project button which

is leading us to this completely

refactored sheden new project page. Here

on the left side in this sidebar we can

choose our own preset. While on the

right side we can go here through all

the components and blocks and we can see

that preset in action. And let's create

our own preset. For style, I'm going to

choose Vega. Base color stone theme lime

icon library phosphor. Then font guys

radius. I'm just going to leave it

default. Menu. We have now this new

translucent thingy which is really cool.

We can see here for example on this

dropdown. When I choose here solid

versus translucent, it is really looking

nice. And menu accent, we are just going

to leave it subtle like this. And we

have now our own preset. So next step is

to go to this create project button.

Then here we can choose our own

template. I'm going to choose Nex.js.

And for our UI, I'm going to choose base

UI. And we have now our commands that we

can just copy and paste directly inside

of our terminal. So I'm opening here my

terminal. I have my projects and I'm

just going to paste it in. And our

Nex.js project is going to be

initialized. We are just going to name

it something like awesome landing page.

There it is. And now our Nex.js JS

project is going to be created together

with all the shed CN configuration and

this preset that we chose right here on

this shed CN new project page. Let's see

if it is done. Yes, it is. So, we can

now go to our awesome landing page and

just run pmpm dev and we are going to

open localhost 3000. And here we have

our completely new nex.js JS project

with all the sheds and configuration and

I can here press D to toggle dark mode,

light mode. So we have everything that

we need. We can now just add blocks to

create our awesome landing page in Lego

style. And for those blocks we are going

to use shed CM blocks library. This is

one of the top shed CN libraries in the

ecosystem. You can see it even coming up

as the first thing in my browser even

before shed CN. I don't know how they

have the biggest collection of blocks

they have. You can see it here. 1,400

blocks. That is really crazy. And you

can basically find anything you need for

your application, website or whatever.

So, we have here 177 heroes, about

sections, product lists. So, everything

that you can imagine exists in shed CM

blocks. I have prepared here a list of

blocks that I'm going to use on this

awesome landing page. And again this is

the way how I always do it. I have some

visual thing in my head. I go browse

around all the blocks. I choose whatever

I like and I create a list like this.

And then it is so easy to implement it.

You literally just go and combine it

like Lego. That's why I said Lego style.

Now I can just go to this navbar 14 and

open it right inside of my browser. And

only thing I need to do is just to copy

this command, put it inside of my

project. And we are going to get this

awesome looking navigation. This one is

premium. I'm using premium because I

wanted to show you the coolest things in

shed cm blocks, but there are many free

blocks as well. So you can try it out.

So what we need to do now because I'm

using premium, I need to go to my

dashboard. And here I need to create my

own API key in order to be able to

import the premium blocks. So here I'm

creating API key. I'm going to name it

ordev. And I'm just going to copy that

one. And we can see here in the setup

guide that I need to create shred cm

blocks API key. So we need to open our

code inside of the cursor. Here it is.

And I'm going to create a new file env.

So now we need shaded cn blocks API key

like this. And I'm just going to paste

my API key. So, I shouldn't show you my

API key right here. And you shouldn't

show your API keys to anyone. I'm going

to delete this one after I record this

video. So, this one should be secret and

shouldn't be public. So, now we just

need to finish our setup guide. We need

to add our registry here and the shed

cmlocks API key inside of our

components.json. So, I'm going to

components.json JSON and instead of

these registries right here, I'm just

adding the shaded CM blocks registry.

And now we are good to go. Now we can

import our components and blocks. So we

can return back to our blocks navbar1 14

and use this command right here. And I'm

just going to paste it inside of our

project. Awesome thing to know is that

shed cm blocks is going to follow our

components.json configuration. So it

knows that we are using base UI or it

knows that we are using radics or

whatever we are using inside of our

preset. So whatever was our preset shm

blocks is following that preset. And let

me show you that one quickly. So here if

we go to our navbar 14 our new component

we can see that we are using here render

which means that this one is using base

UI. But if we go to our components.json

JSON and here instead of B we put in

radics like this and we use exactly the

same command npx shreden add and then

shreds block navbar 14 it is going to

rewrite it and to overwrite the whole

thing in radics. So yes we are going to

overwrite everything like this. Yes. And

now if you return to our navbar 14 here

we can see that it is using now where is

it? Let's see here it is as child. So

now it's completely refactored to Radix

UI which is really amazing. It is so

easy just to refactor to anything we

want. We can choose different colors,

different font or anything and

everything is going to work from one

command. How awesome is that? Let's

return now to B UI. I'm just going to do

this one and this one again. And we are

going to get back to base UI with all

the shed CN components and with all shed

CN blocks. There it is. We are good to

go. And we can now put in the navbar

inside of our layout. So let's go back

to our code. And here I'm going to open

our layout right here. And we are just

going to put here navbar 14. Nothing

else. That's everything that we need to

do. And I'm going to close this closing

tag right here. You can notice that I'm

not even using AI that much. It is so

easy, literally like Lego. And now when

we open our project right here, we can

see that we already have this awesome

looking navigation. And we can change

from light to dark mode and everything

is working together with our colors. How

awesome is that? So now we need to add

all blocks from here and we don't even

need to go to the browser anymore. We

have here hero 195. We can just use

exactly the same command like for navbar

but we are going to use hero 195. And

this one is going to add this new hero

section directly inside of our project.

And we can just use it and put it on our

landing page. So let's go to our main

page right here. And instead of all

these things, I'm just going to put hero

195. This one. And I'm going to remove

this button. We are not to using that

one. And we return. We have our

hero section that is looking awesome

with one command. We were not thinking

about anything. So everything is

working. all the edge cases that you can

think of like light, dark mode. We have

also everything working in small

resolutions. So everything is perfect.

And we have the regular hero section

with awesome title, description, call to

action with all these tabs that are

working with different images. We have

the whole thing. You just need to change

the content for your own landing page.

And now we can just continue. We are

going now on logos 10. I'm just going to

use again completely the same command.

Logos 10. There it is. And we are going

to put it again on the same page. So we

are putting it here on this one. Let's

just see if that one is finished. It is.

So we are going to put here fragments

like this and not footer but we are

going to put logos 10. This one. And

let's now check it out. So here we have

now these logos again everything working

light and dark mode. Let's just continue

our winning streak. So we are going now

on gallery 4. I'm going to put in that

one. Gallery 4. Putting it inside of our

project again. And let's wait for it to

be finished. There it is. Awesome. We

are putting here gallery

for this one. Let's check it out if it

looks good or not. My god, this is

awesome. And we can now change here all

the images and everything. It is looking

so good. And we can see that all our

colors and presets and all the things

that we were using are used throughout

all these components. So that's why it's

really awesome to start from that preset

page on shed CN. Let's continue. We have

pricing 16. Let's do that one. So we are

going for pricing 16. putting that one

in our project again our new block. So

you can see the pattern we are just

putting in whatever we like and we are

seeing the results. Crazy. So there it

is. We have now pricing 16. I'm putting

here pricing 16. There it is. Checking

it out if it looks good. Of course it

looks good. It looks amazing. We have

here the entire thing working both light

and dark mode. Amazing. Let's continue.

We are putting in testimonial 11. Let's

put that one inside of our command.

Adding testimonial 11. And I'm going to

prepare contact 31 for so we can be a

little bit faster on this one. There it

is. So now I'm putting in testimonial

11. There it is. Refreshing the whole

thing. Look at this one. This one is

looking so good both in light and dark

mode. We're going to ch change the

preset later so you can see how it

works. Now we are going with contact 31.

Deleting this testimonial. Putting in

contact 31. And this is so good. This is

why I love shed CN. And shed CN registry

is the most genius thing in development

world like in the last 10 years. So we

have now contact 31. Contact. Let's go

like this. 31. There it is. Let's check

it out just beneath our testimonials. My

god, this one is looking I love this

contact 31. This one is looking so good.

Like look with this image. This is crazy

how good this looks. And the last one is

footer one. And we are going to put that

one in the same way like other

components. And you can imagine how fast

this would be if I just gave this whole

list to AI and AI could do this whole

thing of course like in 1 minute or

something like that. So we are putting

now footer one. Is it ready? It's not

ready yet. And now it should be okay.

Footer

one. There it is. And we have now our

completely new footer. And this is

ladies and gentlemen how you build

landing page in 2026. And now if we want

to change our entire design system for

our project, everything that we need to

do is just go here to the new project

page. We can choose our preset. I'm

going to shuffle through something.

Let's say this one. This one is totally

different because there there is no

roundness. And we just copy this preset.

And now we go to our terminal here. Just

type in mpx shed cn latest in it and

paste this preset that we picked on this

page. So now we just put in one command

like hear me again one command we are

typing here to overwrite everything and

to reinstall all the existing UI

components. And this is my new favorite

thing to do. When I type in this command

I wait on my landing page or whatever is

my project. And here everything is

changing like instantly. You can see now

we are like our font is different, our

colors are different, roundness of

things, everything is totally different

and shm blocks is supporting everything

inside the blocks. So even if I chose

here like for example base UI radics UI

change everything would be refactored

and we have now completely different

looking project. Check this one out. How

awesome this one looks. And everything

is supported, both light and dark mode.

Like everything,

including the small resolutions,

everything is working. And this is

definitely the best way to create your

own landing page in 2026. I really hope

that you enjoyed in this one. Put a like

on this video and if you're not

subscribed to ordev channel, subscribe

now. It is time. See you in the next

one, warriors.

🔗 Shadcn Blocks: https://www.shadcnblocks.com/

Stop Burning Tokens - Use Shadcn Blocks Instead