Library #1

It's really crazy. I don't know how is

this library not popular yet. It is

called Pixel Perfect. And from this

landing page only, you can see that it

is created by some really good designer.

When I move my mouse across this landing

page, we can see here that the

coordinates are changing based on my

mouse position. I really love those

small details. And if we go to the

components, check this one out. So these

are the buttons. Check out this morph

button. How awesome it looks when I

hover it like it gets filled with that

liquid. It really looks awesome. I love

these animations. Really love this

button. Then here we have this morph

image. When I hover, we are changing

this image entirely. This one is also

good. Maybe the contrast is not that

good. Probably in light mode. No, in

light mode also this hover me text

should look better. But here we have

this click me. When I hold my button, it

is like squeezed into one button. And

when I release it, then we again have

like these three buttons. Really looks

awesome. Also here, I love this gooey

button. Check this again. I have to

refresh and go here again.

like it is looking so good. I love this

gooey button. And we have then motion

animations. These are all the things

that are giving life to your page. Check

out when I hover this one, it is

becoming alive and it is giving us some

animation. And that looks always good

when you have something like this in

your app. Then also we have this logo

animation. This one as well like turning

on like some light bulb. Really awesome.

Then we have for example this navbar.

Really good. I would love to see this

one to be gooey like that button. That

would be really cool. And here we have

this image hover. You can see that one

image is becoming bigger while others

are going behind. They're smaller and

they're in some way blurred, darkened or

whatever. And it is looking really good

as well, especially with this art, this

pixel art right here. And we have here

success ripple and this orbit dot. All

pretty good and nice looking animations.

I love it. Then we have this one. I

mean, this is crazy. Check out this one.

We have first this flip text reveal.

Okay, that one. I've seen this before.

It's looking awesome. But check out this

counter right here. When I click it, it

gets like you can see this animation

going through this one. Then we have

this with three. I mean, this is really

crazy. I love this. This is looking

amazing. Like it's going like it's a

streak counter. It is giving us like

animation when we go to some streak and

we can do this animation with this

ripple effect. It's looking awesome. I

love this one. Then we have SVG assets.

This as well. You could think like this

is not something special, but these SVGs

are looking pretty technical and they

are really good when you put them on

your landing page or somewhere. It is

giving that technical feeling in your

project which is really amazing. Then we

have text animations.

I love this one. This matrix rain

decode. It is looking really awesome.

You have plenty of text animations right

here. You can just go and check them out

on Pixel Perfect. And this one, check

out this fire. I mean, if you have some

project that

it makes sense to put something like

this, then just go and do it. You can do

this like go here, copy the shed

registry command, and just add this red

fire into your project, and that's it.

How crazy is this one? Then also, we

have this CD. And we have here different

borders. This one is also looking good.

Then background gradients. You can

choose whatever and just put it inside

of your project. Copy the entire

background and just paste it. Then these

mouse followers. I mean, this is really

crazy. I love this project. Also, this

one, you can play the guitar. [music] I

don't know if you're hearing it. Let me

just turn on my volume.

[music]

I'm playing guitar right inside of this

UI library. Crazy. Go check out pixel

perfect.space. This is one amazing

looking library. Second one is shed CN

Library #2

but for sounds. You can just come here

to this sound CN library and pick any

sound you want. So we have here for

example these sounds

also these like things like that. battle

mode,

battle mode and like crazy sounds and it

is really easy to implement it. Here we

can just use again sheds and registry

command in order to add this sound

directly to our project and the usage is

really simple. We are getting this use

sound hook. We put it inside of our

project and we just put this sound on

the event where we want to use it. This

is one really crazy library. I love it.

And there is also a road map where we

can see all the things that are planned

for this library in future. And they're

planning new components where you can

have some kind of component. Let's say a

button with a sound already wired in

inside of that button. So you can choose

just with a prop if you're going to turn

it on or off. I think that's more

practical. And that one is going to be

really awesome. Can't wait to see this

one. But sound CN is for sure one unique

library and that's why I placed it in

this video. Third library is called

Library #3

Sci-Fi CN. And if you've been following

my channel, you know how much I love

these niche awesome looking libraries.

Let me zoom it in a little bit. So we

have all these nice sci-fi looking

components and all easy to implement

everything in shredsen way. We can see

it by the name Sci-Fi CN. So, let's see

what kind of goodies we have here.

First, we have this alert. Check out

this one. This one is looking amazing.

And we have, for example, these badges.

And this is looking so good. It has that

sci-fi feeling which is really

important. I love it. Then we have, for

example, bar chart. Check out this one.

It's straight like from the Alien movie.

I love it. Also these charts like

everything is looking really good. Some

kind of Star Trek, Star Wars alien vibe

which is really awesome. Even the

breadcrumb I think this is really nicely

chosen font for this library which is

looking really good. Plus these colors,

this neon light. Really love it. Then we

have a button. Check out the button when

I hover it. I I need to zoom this one in

so you can see it properly.

Can you see these lines behind? This is

such nice detail. Such nice touch for

this button. Really amazing. Also for

this one, we can see that it is glowing

on the outside. It's not just like that.

We have that neon border. We have that

glow which is really important for that

sci-fi feeling. also this cancel and

aboard we have also these lines behind I

love it buttons are really really

awesome then we have this card where we

have button and this secondary I I don't

know if this one is called secondary or

what is this like some kind of outline

button or something like that but this

card is really good we have like a

header content and footer same like with

shed CN we can see it here we are using

it exactly in the same way like shed CN.

And check out this highlight color.

Crazy. Really awesome. And we have some

special components that are looking

really good. Check out this heat map.

This is really crazy looking component.

I love this one. Then we have for

example keyboard. That one is looking

pretty simple. But check out this node

graph. This one is also really good. And

it is good. like we can create something

with this that is really like some to

have some sci-fi feeling on our app

which is really awesome. Then we have

this panel and rather that this is

amazing. Check out this one. You just

put this on your landing page and you

automatically have that sci-fi feeling

for your application. There is also this

progress ring which is looking really

amazing. I would love for this one to be

more interactive. I hope that the

creator is watching this video right

now. So, this ring should move just a

little bit to make it more sci-fi even.

Then we have these stat cards and

combined with this status grid. It's

perfect if you want to build some kind

of spaceship application and sci-fi CN

is in some way forcing me to build some

kind of spaceship UI and things like

that. So I can just use these components

which are looking really awesome. And

also this one if you check this terminal

it would also be perfect for some kind

of spaceship application. So definitely

check out sci-fi CN really awesome

library. And final library that I'm

going to show you is from one really

amazing design engineer. His name is

Chandai and he has pretty good eye for

details and this is his private

Library #4

collection of components and blocks that

he created that are missing throughout

the ecosystem. So let's check it out.

First thing is this Apple Hello effect.

So this is the thing that you get when

you buy a new Apple device. You're

getting this hello and it is really cool

that you can put this one as well on

your application. So you get this

animation like hello. This is something

that I haven't seen before. It's really

amazing. Then we have this code block

command. This is particularly good if

you're building some kind of UI library

or something like that. Anything that is

like shred CN related. We have here PMP,

yarn, npm and bun. And you can just copy

and all the details are here which is

really awesome. That's the part where I

said he has really good eye for details

and you can see that this one is looking

really amazing. Then we have here for

example this copy button. This is

something that you are always building

yourself and you always like have

something like okay I'll just put in the

icon and text and then you click and you

see that the users are not seeing that

they copied anything. So you're giving

like little bit of animation changing

the icon and things like that. Then you

see that that icon is not turning back.

So you always have always have some kind

of additional work to do. But here

you're getting the whole thing and you

can just use it. Same thing for example

for this GitHub stars. This is something

that I always build myself. GitHub icon

plus the number of stars on my GitHub

repo. And then I build it. And you have

some problems when you get over, for

example, 1,000 stars. it gets like

somewhere misplaced or something

happens. But here you have everything

handled for every edge case. So this one

is really awesome. I'm going to use this

one. I built everything for my projects

before, but now I can use this one from

Chen Dai. And for example, what I'm

using is this testimonial spotlight.

You're just putting in your tweet. And

look how awesome it looks. Let me zoom

it in. So here when I hover my mouse it

get it get gets this spotlight effect

which is really awesome and I placed

this one already on ordev.com. You can

check it out here. I'm using this exact

component from trendy. So it is looking

really good. I recommend this one if you

want to put testimonials on your landing

page. And we have this theme switcher.

Let me zoom this one in. I love this

theme switcher. It is not easy to find a

theme switcher like this. So check this

one out. When I go to system mode, we

have this bubble over this monitor right

here. And when I click on light mode, we

have this smooth transition animation

moving to this light mode. And same like

when we go to dark mode. And this one is

really good. Usually all the theme

switchers are looking just like this,

like moon and sun, and you're just

changing from light to dark mode. And

that's it. This library is definitely

worth checking out. Chandai has one of

the best portfolios in my opinion. It

really has some small details and all

those details are also inside of these

components and I saw as well that he

started creating these like work

experience and blocks that he's using

also in his portfolio. So I really hope

that we'll have all the blocks from his

portfolio that we can just build entire

portfolio without effort. So, we can

just use shed cm registry commands in

order to build our whole like page

template portfolio. I really hope that

you enjoyed in this video. If you have

any crazy UI libraries, just drop them

in the comments. I'm always hunting for

Links:
🎯 Pixel Perfect UI: https://www.pixel-perfect.space/
🔊 Sound CN: https://www.soundcn.xyz/
🚀 SciFi CN: https://www.scificn.dev/
⚡ Chánh Đại: https://chanhdai.com/components

I Found the MOST INSANE React Component Libraries Built on Shadcn