Ras Mic · YouTube · 08:55

Build polished web apps using these UI libraries

Ras Mic tours four component libraries — Kokonut UI, Style UI, Cult UI, and Motion Primitives — demoing standout components live in the browser, with a bonus pit-stop at promptkit.com for AI-specific building blocks.

Posted

December 1st 2025

5 months ago

Duration

08:55

Format

Listicle

educational

Channel

RM

Ras Mic

§ 01 · The Hook

The bait, then the rug-pull.

Every dev knows the cliché — don't judge a book by its cover. Ras Mic opens by killing it dead: your users will absolutely judge your app on sight, so the cover had better be beautiful. What follows is a fast, live-demo tour of four component libraries that make 'no excuse for ugly' the only reasonable position.

§ · Stated Promise

What the video promised.

stated at 00:10“I'm gonna be showing you four component libraries that you can use to build sleek, beautiful applications that your users will love and will return and will want to use continuously.”delivered at 08:22

§ · Chapters

Where the time goes.

00:00 – 00:33

01 · Hook — the cover lie

Inverts 'don't judge a book by its cover' to argue users always judge apps visually. Sets up the 4-library premise.

00:33 – 02:43

02 · Library 1 — Kokonut UI

Niche/distinctive component library. Demos: Liquid Glass music player, Apple Activity Card, Bento Grid, Card Flip, Stack of Cards, Currency Transfer, AI State Loading, AI Voice, text animations (typing, matrix, shimmer, swoosh, glitch).

02:43 – 03:17

03 · Library 2 — Style UI (coming soon)

Ras Mic's own blocks-and-templates library. Waitlist at styleui.dev. Self-promotional but low-pressure — just a waitlist mention.

03:17 – 05:18

04 · Library 3 — Cult UI

Inspired by the Family crypto wallet app. Demos: FamilyDrawer (smooth animated sheet drawers), FamilyButton, ExpandableScreen (fullscreen waitlist modal), BrowserWindow (Chrome/Safari mockup with controls), 3D Image Carousel, Hover Video Player, ShiftCard.

05:18 – 08:22

05 · Library 4 — Motion Primitives

Animation-first UI kit (Framer Motion + Tailwind CSS). Demos: Animated Number, Sliding Number, Toolbar Dynamic/Expandable, Dock (macOS-style magnification), Glow Effect, Image Comparison (drag/hover/spring variants), Scroll Progress bar, Magnetic Button, Morphing Dialog, Morphing Popover. Bonus: promptkit.com for AI building blocks.

08:22 – 08:55

06 · CTA + outro

Subscribe push, Style UI waitlist reminder, sign-off.

§ · Storyboard

Visual structure at a glance.

hook

hookhook00:00

kokonut ui

valuekokonut ui00:33

liquid glass demo

valueliquid glass demo00:49

activity card

valueactivity card01:10

currency transfer

valuecurrency transfer01:57

style ui waitlist

ctastyle ui waitlist02:43

cult ui / family drawer

valuecult ui / family drawer03:17

browser window

valuebrowser window04:13

motion primitives

valuemotion primitives05:18

toolbar dynamic

valuetoolbar dynamic06:04

image comparison

valueimage comparison06:31

magnetic button

valuemagnetic button07:11

morphing dialog

valuemorphing dialog07:30

promptkit bonus

valuepromptkit bonus07:38

CTA + outro

ctaCTA + outro08:22

§ · Frameworks

Named ideas worth stealing.

00:33list

Kokonut UI

Liquid Glass music player
Apple Activity Card
Bento Grid
Card Flip
Stack of Cards
Currency Transfer
AI State Loading
AI Voice
Text animations (typing/matrix/shimmer/swoosh/glitch/slice/scroll)

Niche component library focusing on distinctive, hard-to-build-from-scratch components rather than generic form/layout kits.

Steal forany app that needs a wow-factor landing section or AI-specific UI state indicators

03:17list

Cult UI

FamilyDrawer
FamilyButton
ExpandableScreen
BrowserWindow
3D Carousel
Hover Video Player
ShiftCard

Web port of UI patterns from the Family crypto wallet app — the gold standard of mobile app design aesthetics brought to web.

Steal forwaitlist pages, product demos, SaaS dashboards needing premium mobile-app-grade feel

05:18list

Motion Primitives

Animated Number
Sliding Number
Toolbar Dynamic/Expandable
Dock
Glow Effect
Image Comparison
Scroll Progress
Magnetic Button
Morphing Dialog
Morphing Popover

Animation-first kit built on Framer Motion + Tailwind. Every component prioritises motion quality — bouncy spring physics, morphing transitions, cursor magnetism.

Steal forany landing page that needs to feel alive — stats sections, social-proof numbers, feature comparison sliders

07:38list

promptkit.com

Chain of Thought
Chat Container
Code Block
Loader variants

AI-specific building blocks discovered inside Motion Primitives nav. Fills the gap for AI app UI patterns that generic component kits don't address.

Steal forany AI-powered feature — loading states, chain-of-thought UX, chat interfaces

§ · Quotables

Lines you could clip.

00:08

“When it comes to web and mobile apps, we are 100% judging the book by its cover.”

Punchy inversion of a universal cliché — lands in one sentence with zero setup needed.→ TikTok hook

08:28

“You have no excuse on having ugly looking web applications. You literally have all these component libraries linked in the description down below.”

Direct challenge / mic-drop closer — highly clippable for a 'stop making excuses' reel.→ IG reel cold open

01:26

“There are the general component libraries that have all the components. There are the blocks templates component libraries, and then there's the unique component libraries. And this is one of those.”

Clean taxonomy of component library types — useful pull-quote for a newsletter or Twitter thread.→ newsletter pull-quote

§ · Pacing

How they spent the runtime.

Hook length33s

Info densityhigh

Filler5%

§ · Resources Mentioned

Things they pointed at.

00:33toolKokonut UI ↗

02:43productStyle UI ↗

03:17toolCult UI ↗

05:18toolMotion Primitives ↗

07:38toolpromptkit.com ↗

03:17productFamily (crypto wallet app)

§ · CTA Breakdown

How they asked for the click.

08:28subscribe

“Make sure to like, comment, subscribe, hit that notification bell, and I'll see you in the next one. Peace.”

Standard YouTube outro. Also includes a soft Style UI waitlist push at t=163 mid-video and a repeat at t=520.

§ · The Script

Word for word.

HOOKopening / re-engagementCTAthe pitchanalogystory

00:00HOOKI'm sure you've heard of the age old saying, do not judge a book by its cover. But unfortunately, when it comes to web and mobile apps, we are 100% judging the book by its cover. That's why in today's video, I'm gonna be showing you four component libraries that you can use to build sleek, beautiful applications that your users will love and will return and will want to use continuously.

00:24HOOKBecause remember, they're going to judge the book by the cover, so why not make the cover beautiful. Sit back, relax, let's get into it. First UI library is Coconut UI. This is a collection of stunning components and I will say this is one of those component libraries that has the unique ones. Right? They're like the general component libraries that have all the components. There are the blocks templates component libraries, and then there's the unique component component libraries. And this is one of those. For example, you have the slide text button, which I really like. Right? I slide and it says click to see more. And then you have this liquid glass

00:58music player. Right? You can drop this in using their NPX command or BunX command or you can open this in v zero or straight up just copy the code. They also have the Apple activity card. Right? The activity rings. If you're on the Apple watch or use the health app, you'll know this component. And this is a pretty hard one to build. Right? So you can build on top of this component, change it up. Again, NPX command or you can copy the code. Uh, Coconut UI also has beautiful bento grids, a nice bento grid on your homepage.

01:29It just does something, man. So you can see these nice little animations over here. I can see the code, although it'd be nice if there was, um, like highlighting, uh, syntax highlighting, which I'm sure you can add yourself using AI. And then we have card flip, animates beautifully, card looks sleek. Oh, this is a good one. Uh, the stack of cards. You click and the the card split. You click and then it goes back in the order it was. And then you have this component. Say you're building something to do with currency transfers. Right? You just saw that animation right there. Super sleek and clean. Coconut UI also has some AI specific components like an input selector,

02:06uh, search. You have here, like, let's say you have some tool calling happening. You wanna have some loading state in the chat. You can use this. Um, you can use this as well. And then they have an AI voice component. Um, eleven Labs also has something similar like this, so you can pick and choose. And you have a couple text animations here, one with scroll, typing, matrix,

02:26CTAdynamic, the glitch effect, shimmer, slice text, swoosh. And then last but not least, you have this profile drop down from all the components that I like. There's plenty more here. Check it out yourself. The link is in the description, Coconut UI. Now second up, we have style UI. It says create beautiful UI with our blocks and templates, but this one is coming soon. Someone very handsome that you may have seen before, I'll put his picture right here, is working on this with his team. Expect blocks

02:55CTAand templates. They're going to be super clean and super fresh, and I can't wait for this person again to get them into your hands. But to be on the wait list to make sure you're alerted when these drop, make sure to go to styleui.dev and enter the wait list. Make sure to follow me on x as well. That's where I'll be announcing it. I'm sure you're going to love these ones.

03:17Next up, we have Cult UI. I don't really feel comfortable with the name, but there are a couple components that I found fresh here. The first one being the family drawer. Now if you're not familiar with family, it's this crypto wallet app. But in my opinion, it's the most beautifully designed, beautifully architected app ever. The animations

03:36to the haptic feedback to how the components look, it's an absolutely dream of an app. And one of the beautiful things they designed are these drawers that just smoothly animate, and Cult UI has brought these into the web. I particularly like the open custom drawer one. That's a really good one. Again, you have the family button as well. When you click that, this nicely animates.

04:00I really like this. You can definitely use this in your web apps. Another cool one that I liked was the expandable screen. Say you have a waitlist page, you can click get early access, and it's like a model that takes over the entire page. User can fill it up, then close it, nicely animates back. Now another one I really like is the browser window. This is a customizable browser window mock up component with support for Chrome, Safari, and generic style. So you can customize how this looks. You can make this look like Safari, Chrome. You could specify the URL. You can choose to show the address bar. We can make this super small or extra large if you want. You can have the sidebar be to the left, to the right, and there are these presets as well that you can select, but a really nice and sleek component, definitely something you should add on your web apps. Obviously, if it makes sense. This three d carousel of images is pretty cool. And again, just to set this up, all you do is copy the command and if you're building on chat scene, which I'm sure you are, you can have this set up easily. And then they have a hover video player where you see the component, I can hover over this and now it becomes a video player. This is pretty sleek. I actually like this. I don't like the default video player with HTML,

05:07uh, the video tag, so this is a pretty sleek component. And then you have the shift card component where if you hover over, you see the image shift to the right, and then this pop up slide beautifully. Again, there are plenty of components in Cult UI. I'll have the link down in the description below. Check it out for yourself. And then we have motion primitives. UI kit to make beautiful animated interfaces faster. So there's an emphasis on beautiful motion and animation

05:35with motion primitives. For example, let's say the animated number. If you want to animate some GitHub stars that you wanna show off on your page or some dollar dollar bills, this is a great component for you to have. You have then the sliding number. This is just beautiful stuff. Again, all the code is right there for you. We also have the dynamic toolbar where if I click on this, you notice how it nicely shifts.

05:59Let's click on expandable. If I click on this, you see it expands from bottom to top. This, again, you can have a nice little toolbar or like even a dock using this component. What we're going to do is we're going to click on components on the top right, and then we're going to click on dock. I really like the dock component. You can style this with whatever icons you want, but that nice animation as you hover over it is beautiful. You have this glow effect right here. You can have it on buttons. But also what I like is let watch this. When I click submit, the component glows. Right? So this is something you could do with some sort of submission.

06:31And then you have this, like you can use this as, a before and after, or you can use this as a, like, a slider to show, like, if you use my tool, this is what it looks like. If you don't, this is what it looks like. Really sleek and simple. You can also have it on hover. So this is where I clicked on the, like, the line, the separator, and I'm dragging it. This one, I just hover, and then I when I go left and right, it follows. This one sorta has a spring motion where, like, notice how it's bouncy, like, it catches up. And then you can also have a custom slider with this. You can have a progress

07:03bar. Right? That's on the nav bar. That's on the top. So that'll show people how much progress they've made in reading an article or going through a page. They also have this magnetic button where, like, if I hover over it, it you notice how it sort of follows my cursor. Um, there's also where you can see the text is more so floating in the button. Like, these little things are just so immaculate and beautiful, and they just enhance the user experience of your applications.

07:30Oh, this is a morphing dialogue. So notice how, like, let's say this is like a notification that pops up. I can click on it and and that dialogue just animates beautifully. You can have that with images as well. You can have this with cards as well. And then you have a morphing pop over. Let's say you are, like, editing some settings, a profile setting, whatever it is, you can have it just pop up there, click submit, and then it closes back. Here, it's telling you you can customize the transitions however you want. You can have a text area pop up. There are just a lot of these primitives that you can find with motion primitives that I find super useful when developing web apps. And then I noticed

08:05CTAwhen I clicked on IA, promptkit.com popped up, and this is for AI applications. So if you're building an AI app, they have building blocks for you to use. Like, for example, their chain of thought component where you can show how the model is processing the information.

08:22CTAYou have a chat container here. You have code blocks. Again, I'll link all of this stuff in the description down below. All this stuff is copy paste for you to use. So please, you have no excuse on having ugly looking web applications. You literally have all these component libraries linked in the description down below. And, I want to let you know I will be dropping my very own style ui.dev

08:44CTAvery soon. Make sure to sign up for the wait list link in the descriptions down below. Thank you so much for watching this video. Make sure to like, comment, subscribe, hit that notification bell, and I'll see you in the next one. Peace.

§ · For Joe

Four libraries. Zero excuses.

Swipe file for builders

The best UI trick isn't building better components — it's knowing which copy-paste library already built them for you.

Kokonut UI for distinctive wow-factor components you'd never build from scratch (activity rings, liquid glass, currency transfer flows).
Cult UI when you want your web app to feel like a premium mobile app — FamilyDrawer and ExpandableScreen alone are worth the install.
Motion Primitives for landing pages that need to feel alive — image comparison sliders, magnetic buttons, morphing modals.
promptkit.com is the hidden gem: AI-specific components (chain-of-thought, chat container, loaders) that generic kits completely ignore.
All four are copy-paste or NPX — the barrier to polished UI is now zero. Use this as a checklist before shipping any public-facing page.
The 'unique component library' category (Kokonut's lane) is underserved content — a video tourting only unusual/hard-to-build components would crush.

§ · For You

What a polished app actually costs you.

For the non-dev viewer

Beautiful apps aren't built from scratch anymore — they're assembled from free, open-source component libraries that any developer can drop in.

If your developer says 'that animation would take weeks' — show them this video. These components are copy-paste.
When evaluating SaaS tools, a polished UI is no longer a signal of quality engineering — it might just mean they used Motion Primitives.
The 'wow' components you see on trendy apps (morphing dialogs, spring-physics sliders, magnetic buttons) are publicly available for free.
Next time you see an Apple Watch-style activity ring on a web app, now you know: that's probably Kokonut UI, not custom engineering.

§ · Frame Gallery

Visual moments.

hook

Frame at 00:10 from Build polished web apps using these UI libraries

Frame at 00:14 from Build polished web apps using these UI libraries

Frame at 00:23 from Build polished web apps using these UI libraries

Frame at 00:30 from Build polished web apps using these UI libraries

kokonut ui

§ · Watch next

More from this channel + related dossiers.

Ras Mic · Listicle

These UI libraries + AI = beautiful looking web apps

A 12-minute screen-share tour of nine free component libraries and templates, with a closing method for turning any one component into a whole AI-extracted design system.

Stephen G. Pope · Tutorial

Build A SaaS Startup With Claude Code (22-Min Crash Course)

A zero-to-deployed walkthrough: Next.js + Supabase + GitHub + Vercel, built live with Claude Code in under 22 minutes.

January 15th 2026

Alex Finn · Tutorial

Claude Code Beginner Guide - Get Started in 20 Minutes (2025)

A 23-minute walkthrough that takes a non-coder from zero to a working drag-and-drop calendar app using three undocumented Claude Code workflow secrets.