How I Build Clean UI On Nextjs

Sdílet
Vložit
  • čas přidán 9. 09. 2024
  • I use 3 libraries in combination to build clean UIs quick and fast. I go over my strategy on how I combine the 3 in this video!
    Follow me on Twitter: / rasmickyy
    Join my Discord: / discord
    Sponsor a video: www.passionfro...

Komentáře • 140

  • @rasmic
    @rasmic  Před 5 měsíci +16

    hey you, why don't you scroll back up and hit the subscribe button
    p.s sorry for the loud mic bros, working on making the audio clean for next video

    • @JuicyBenji
      @JuicyBenji Před 5 měsíci +1

      Not sure if it’s free, but potentially run it through adobe podcast to clean it up

    • @rasmic
      @rasmic  Před 5 měsíci +1

      @@JuicyBenji I used a yeti mic but for some reason its so loud

    • @AnoopD2013
      @AnoopD2013 Před 5 měsíci

      Which browser you are using with tabs on left side ?

  • @Warpgatez
    @Warpgatez Před 5 měsíci +7

    This was a great video. Simple. Straight to the point. Provided proof. Kept engagement.
    Keep making videos like this and you’ll go really far on CZcams.

    • @rasmic
      @rasmic  Před 5 měsíci +1

      Appreciate u g

  • @dgcp354
    @dgcp354 Před 5 měsíci +12

    the dashboard sidenav icons are fire

    • @rasmic
      @rasmic  Před 5 měsíci

      Thanks bro, glad you like it!

    • @harunalrd
      @harunalrd Před 5 měsíci

      ​@@rasmic what is the icon name? And sidebar button sidebar components is from shadcn?

  • @beloaded3736
    @beloaded3736 Před 2 měsíci +1

    Thanks for your advice sir Michael 🙂

  • @funfzigkubik3735
    @funfzigkubik3735 Před 5 měsíci +6

    Awesome video man, didn't know of Aceternity, really cool! keep going!

    • @rasmic
      @rasmic  Před 5 měsíci

      Thanks fren. Will do!

  • @Not_Aran8276
    @Not_Aran8276 Před 4 měsíci +1

    Just tried this in my school programming assignment for a simple PHP crud homework, teacher suggested us just to use bootstrap, but I decided to go overkill and go with this instead, also using Next js than PHP since technically allowed as long as I can do it. Turned out pretty great.
    To put a perspective, everyone in class still learning to do basic JavaScript and barely knows how to use the basics of a bootstrap, and most of the HTML are copy and pasted off w3schools.

    • @rasmic
      @rasmic  Před 4 měsíci

      solid choice my boyyy

  • @nnadivictory917
    @nnadivictory917 Před 5 měsíci +2

    Thank you bro
    Hyper UI is a new one for me and you just gained a new subscriber

    • @rasmic
      @rasmic  Před 5 měsíci

      Glad to have you onboard homie!

  • @takodanobaba
    @takodanobaba Před 5 měsíci +1

    Aceternity UI is new to me and it's kind of what I've been looking for to compliment shadcn! Thanks a lot. Always nice to catch a YT creator so early on in their endeavors for content creation. Keep it up man, I've been really enjoying your content.

    • @rasmic
      @rasmic  Před 5 měsíci

      Thanks for the support. Aceternity is definitely a game changer!!

  • @AlbertCelmaOrtega
    @AlbertCelmaOrtega Před 5 měsíci +1

    Really good Mic!!! I had Heist video open in a tab few days ago (3.1K subs). Refreshed --> (4.05K subs) NICEEE

    • @rasmic
      @rasmic  Před 5 měsíci

      I appreciate the support bruh

  • @DerrekWonders
    @DerrekWonders Před 5 měsíci +2

    You’re crushing, man. Keep it up, you’ll be fireship soon

    • @rasmic
      @rasmic  Před 5 měsíci

      Appreciate the kind words!

  • @XIIOSRS
    @XIIOSRS Před 4 měsíci +1

    Thanks for sharing bro, recently exposed to nextjs and this really helps!

    • @rasmic
      @rasmic  Před 4 měsíci

      Glad it helped!

  • @benmradbilel2177
    @benmradbilel2177 Před 5 měsíci +1

    Men thank's a lot for this video, it is simple yes but very helpfull . Thank you

    • @rasmic
      @rasmic  Před 5 měsíci +1

      Glad you liked it!

  • @whatabhi
    @whatabhi Před 5 měsíci +1

    Informational. Idk about the existence of these aceternity and hyperui. thank you for the video

    • @rasmic
      @rasmic  Před 5 měsíci

      Glad you enjoyed fren!

  • @DanteMishima
    @DanteMishima Před 5 měsíci +10

    My guy, your zoom in zoom out... Tone it down

  • @tansven8760
    @tansven8760 Před 5 měsíci +5

    Hear me out, shadcn (base) + v0 (ai) + lucid icons (icons) + daisy ui (shortening classnames)

    • @rasmic
      @rasmic  Před 5 měsíci

      saucy

    • @Not_Aran8276
      @Not_Aran8276 Před 4 měsíci

      I like using daisy ui as some of the behavior of a component, for example a pop up modal. Then I skin the UI using shadecn.

  • @lubu2960
    @lubu2960 Před 5 měsíci +1

    that tracing beam does look amazing

    • @rasmic
      @rasmic  Před 5 měsíci

      it makes things spicy

  • @user-tp9bg7sz1t
    @user-tp9bg7sz1t Před 5 měsíci +1

    This is a great list. I'm going forward just use this.

    • @rasmic
      @rasmic  Před 5 měsíci

      Glad it was helpful!

  • @jesusfs
    @jesusfs Před 5 měsíci +1

    The best video in the world. Good video. Good explanation. You are the best.

  • @arthurba123
    @arthurba123 Před 5 měsíci +1

    Really nice toolkit! Thanks for sharing.
    I also like to use mui component library to build some components

    • @rasmic
      @rasmic  Před 5 měsíci

      Glad you enjoyed the video fren

  • @phenomenal3873
    @phenomenal3873 Před 5 měsíci +1

    sold me with 2 vids brother, keep this up

    • @rasmic
      @rasmic  Před 5 měsíci

      Glad to have you onboard fren!

  • @Pokopicos
    @Pokopicos Před 5 měsíci +1

    Great stuff man, thanks for the advice 👍

  • @hervmusic
    @hervmusic Před 5 měsíci +1

    Thanks bro. Shadcn is a game changer!

  • @nyagah243
    @nyagah243 Před 5 měsíci +1

    Found this just at the right time.

  • @edwinselvaraj8323
    @edwinselvaraj8323 Před 5 měsíci +1

    actually useful video my g!

    • @rasmic
      @rasmic  Před 5 měsíci

      Glad it helped

  • @top_loserrr1221
    @top_loserrr1221 Před 5 měsíci +1

    thanks man, really helpful

  • @jsde_coder3234
    @jsde_coder3234 Před 5 měsíci +1

    Nice. Thanks for that BRO!

  • @teabookcodes
    @teabookcodes Před 5 měsíci +1

    Very nice, straightforward and useful video, thanks for the great content man! You earned a sub from me 🚀

    • @rasmic
      @rasmic  Před 5 měsíci +1

      Thanks for the sub! I really appreciate it :)

  • @mohammedsaad0761
    @mohammedsaad0761 Před 5 měsíci +4

    great content as always man ! being a tailwind css dev im loving hyper ui for fast dev 🚀

    • @rasmic
      @rasmic  Před 5 měsíci

      Same here! Glad you enjoyed the video!

  • @Fullflexno
    @Fullflexno Před 5 měsíci +1

    Coool video! Thanks!

  • @naslouki
    @naslouki Před 5 měsíci +1

    I don't code, but this is cool, subscribed

    • @rasmic
      @rasmic  Před 5 měsíci

      haha i appreciate u gang

  • @stevebendersky2056
    @stevebendersky2056 Před 5 měsíci +1

    Thats a great video

  • @whysumancode
    @whysumancode Před 5 měsíci +1

    We are on the same track btw! i use all of them

    • @rasmic
      @rasmic  Před 5 měsíci

      great minds think alike

  • @filipjnc
    @filipjnc Před 5 měsíci +2

    Good video. I suggest to increase your audio quality/mic to get more subs.

    • @rasmic
      @rasmic  Před 5 měsíci

      Yeah, need to up my setup, will do sir!

  • @OnlinePocketss
    @OnlinePocketss Před 5 měsíci +1

    Great video! Which screen recording software are you using?

    • @rasmic
      @rasmic  Před 4 měsíci

      Screen studio g

  • @ChangminKim
    @ChangminKim Před 5 měsíci +1

    Thank you for the information.
    Just a thought - the local zooming and panning animations that follow the mouse pointer feel a bit too rapid and can be disorienting. It would be appreciated if they could be made smoother.

    • @rasmic
      @rasmic  Před 5 měsíci

      Thanks for the tip!

  • @eliuddyn
    @eliuddyn Před 5 měsíci +1

    Amazing content 🔥🔥

  • @nanonkay5669
    @nanonkay5669 Před 5 měsíci +1

    I've been married to Mantine for a while and I am still baffled at how people sleep on it

    • @rasmic
      @rasmic  Před 5 měsíci

      time for divorce LOL

  • @me-yn1mn
    @me-yn1mn Před 5 měsíci +2

    Clean and smooth edit bro, what software do you use?

    • @rasmic
      @rasmic  Před 5 měsíci +2

      screen.studio

  • @breakoutgaffe4027
    @breakoutgaffe4027 Před 5 měsíci +1

    Super helpful ty

    • @rasmic
      @rasmic  Před 5 měsíci +1

      Glad it helped

  • @JuicyBenji
    @JuicyBenji Před 5 měsíci +1

    I love how you call it “ass eternity” 😂
    Pretty sure it’s meant to be “ace ternity”
    But nice video, never heard of the hyper one, but I also very much like the two others

    • @rasmic
      @rasmic  Před 5 měsíci +1

      oh man you right, I been saying it wrong LOOOL

  • @borisyou8175
    @borisyou8175 Před 5 měsíci +1

    really cool!!

  • @karabetian
    @karabetian Před 5 měsíci +1

    Really glad the algorithm suggested me this video. Thanks for sharing mate!

    • @rasmic
      @rasmic  Před 5 měsíci

      Glad you enjoyed it!

  • @stevebendersky2056
    @stevebendersky2056 Před 5 měsíci +1

    How to best and fast build notifications component (on top left of the page as a click to open, like, similar to whatt youtube has)

    • @rasmic
      @rasmic  Před 5 měsíci

      which shadcn, a few seconds... I'll drop a video on responsive design soon!

    • @stevebendersky2056
      @stevebendersky2056 Před 5 měsíci

      @@rasmic with shadcn? But they don’t have a notification component

  • @fromsticktonet
    @fromsticktonet Před 5 měsíci +2

    Great toolkit, rankboost UI looks clean!

    • @rasmic
      @rasmic  Před 5 měsíci +1

      Thanks brotha!!

  • @tiisetsontsoane5809
    @tiisetsontsoane5809 Před 5 měsíci +1

    Seems like every dashboard and landing pages are gonna end up looking like Next Js

    • @rasmic
      @rasmic  Před 4 měsíci

      it be like that

  • @Totomenu
    @Totomenu Před 5 měsíci +1

    Subscribed 👍

  • @lokeshkavisth
    @lokeshkavisth Před 5 měsíci +1

    Great video. BTW what tools do you use to record your videos?

    • @rasmic
      @rasmic  Před 5 měsíci +1

      I use screen.studio/ to record my videos

  • @coddude3284
    @coddude3284 Před 5 měsíci +1

    what program you use for recording ?? and mouse things ?

    • @rasmic
      @rasmic  Před 4 měsíci

      screen studio

  • @mohamedyamani8502
    @mohamedyamani8502 Před 5 měsíci +1

    on React*

  • @Not_Aran8276
    @Not_Aran8276 Před 5 měsíci +1

    Was this really that easy to create sites like that? I saw alot of big rich corporate websites but their website just looks like an average half-done WordPress site, I guess that’s on the programmers. But anyways thanks for sharing these fire UI libraries 👍

    • @rasmic
      @rasmic  Před 5 měsíci +1

      Big companies usually use old tech and don't upgrade unless they need too!

  • @BonBaisers
    @BonBaisers Před 5 měsíci +1

    Thank you so much ! Just in time !
    Can you please tell me what browser are you using ?

    • @rasmic
      @rasmic  Před 5 měsíci +1

      Thanks for watching! I'm using arc.net/

  • @JoseAntonio-sn6sf
    @JoseAntonio-sn6sf Před 5 měsíci +1

    Nice work Bro, what about the cross platform compatibility? how does it look on a phone?

    • @rasmic
      @rasmic  Před 5 měsíci

      It looks great mobile and tablet optimized

  • @Sawqlain
    @Sawqlain Před 5 měsíci +1

    What do you use for recording your screen where the focus is moving with the cursor? Or is that done in post?

    • @rasmic
      @rasmic  Před 5 měsíci

      I use screen.studio

  • @bodywithoutasoul
    @bodywithoutasoul Před 5 měsíci +1

    Thanks brother this was super useful. Q. How can I start getting some freelance work as a new web dev? I can pretty much pull all this off on my own I’m ready to start earning.

    • @rasmic
      @rasmic  Před 5 měsíci

      Most of your work will be marketing, I suggest posting on your social media accounts... start there!

  • @UmairSadaqat
    @UmairSadaqat Před 5 měsíci

    How can I use my iPhone as a webcam to make a video like this ??

    • @rasmic
      @rasmic  Před 5 měsíci

      I use screen.studio

  • @salibonani7968
    @salibonani7968 Před 5 měsíci

    How and where do you deploy your apps in production?

    • @rasmic
      @rasmic  Před 5 měsíci

      I deploy everything on vercel and use cloudflare as a proxy

  • @itzJingran
    @itzJingran Před 5 měsíci +1

    what is the browser you are using bro?

  • @realdaly
    @realdaly Před 5 měsíci +1

    why is bro filming using 4:3?

    • @rasmic
      @rasmic  Před 5 měsíci +1

      my bad gang, im new to this thing lol

    • @realdaly
      @realdaly Před 5 měsíci +1

      @@rasmic keep it up, was just wondering. nonetheless ur content is great 🔥

  • @ingenieroriquelmecagardomo4067
    @ingenieroriquelmecagardomo4067 Před 5 měsíci +1

    good video bro. new sub

    • @rasmic
      @rasmic  Před 5 měsíci

      Thanks for the sub!

  • @mee_ehow5106
    @mee_ehow5106 Před 5 měsíci +1

    yo bro you need to tweak your microphone, its peaking so much

    • @rasmic
      @rasmic  Před 5 měsíci

      I know, will make it cleaner for the next video!!

  • @gg.cip0t
    @gg.cip0t Před 5 měsíci +1

    hi brother new sub here.. can u help on how to make responsiveness to a site..

    • @rasmic
      @rasmic  Před 5 měsíci +1

      That's on my list of content, thanks bro!

    • @gg.cip0t
      @gg.cip0t Před 5 měsíci

      @@rasmic eagerly waiting bro!💗

  • @johnmichaelomambac4764
    @johnmichaelomambac4764 Před 5 měsíci

    Name of the browser?

    • @rasmic
      @rasmic  Před 5 měsíci

      arc.net/gift/69f037fe

  • @nahomtesfaye-ns8jk
    @nahomtesfaye-ns8jk Před 5 měsíci +1

    please tell me you are habesha

    • @rasmic
      @rasmic  Před 5 měsíci

      yessirrr selam new?

    • @nahomtesfaye-ns8jk
      @nahomtesfaye-ns8jk Před 5 měsíci

      @@rasmic heyyyyyyyyyyyyy my brother from another mother, nice to meet you bro, proud of your bruh, we need Devs like you

    • @nahomtesfaye-ns8jk
      @nahomtesfaye-ns8jk Před 5 měsíci

      @@rasmic import RasMic from '''Ethiopia" console.log('subscribed')

  • @jakescript_
    @jakescript_ Před 5 měsíci

    Mic your mic is too loud 📢

    • @rasmic
      @rasmic  Před 5 měsíci

      will fix for the next vid

  • @hellodefhellow
    @hellodefhellow Před 5 měsíci

    You all using trash tech, just use php laravel or rails

    • @rasmic
      @rasmic  Před 5 měsíci +1

      whatever boomer lol

    • @hellodefhellow
      @hellodefhellow Před 5 měsíci

      @@rasmic php laravel and rails is more mature than all these hybrid stupid framework, you just making content about all these because they are famous but not useful, i was just like you all delusional learning next js and sveltkit, when i started using php then i realised laravel can eat all these framworks, you stay delusional and lie others for your content.

  • @iritesh
    @iritesh Před 5 měsíci +3

    Nice clickbait, no value atleast for me 🫠 the secret is the layout you design
    The rankboost AI one looks pretty shit tbh

    • @ingenieroriquelmecagardomo4067
      @ingenieroriquelmecagardomo4067 Před 5 měsíci +5

      ok bro ill be waiting for your video

    • @symbol767
      @symbol767 Před 5 měsíci +4

      It was definitely NOT clickbait at all, you clearly never had to build MVP's before and only work a regular job, stuff like this are what we need as business people to ship stuff FAST

    • @rasmic
      @rasmic  Před 5 měsíci

      exactly :)

    • @iritesh
      @iritesh Před 5 měsíci

      ​​@@symbol767Yes but I knew and have used these libraries before. What I was looking for is actually "how to build a clean UI" that a user like - when you think about it aren't components just a small part of it