Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Twitter UI is a beast to style. Responsive is still rough, ended up using grid for the 3 main columns. Using Tailwind CSS and Next JS for components. Will deploy to Vercel when ready

Roy Quilor

1,284 subscribers

65,130 views • 3 years ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

9 Comments

Lee Robinson3 years ago

Looks really good!

Roy Quilor3 years ago

Wow, thanks Lee. I have binged on many of your videos

Preston Bourne3 years ago

Any chance you’ll upload this to YouTube? Been wanting to pick up tailwind

Roy Quilor3 years ago

@saintprestonn Good idea. I will make it

Peer Richelsen — oss/acc3 years ago

YOOO lets turn this into a #nostr client

Roy Quilor3 years ago

Hey Peer, I'm not sure what a nostr client is yet, but why not 😂

Hasira 🥃🪴3 years ago

I am just in the process of making my own UI based on twitter and instagram.

Roy Quilor3 years ago

Nice, would love to see the progress. Are you using a framework?

Roy Quilor3 years ago

Thanks Tiago

Related Videos

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic

CodeHagen

16,295 views • 1 year ago

1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this? Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️

1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this? Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️

shadcn

531,969 views • 3 years ago

Introducing Motion UI. White label, production-ready, performance-graded UI components for React. Ready to drop straight into your design via shadcn CLI and Tailwind CSS, or adapt via your agent with our one-click prompt generator or the Motion MCP.

Introducing Motion UI. White label, production-ready, performance-graded UI components for React. Ready to drop straight into your design via shadcn CLI and Tailwind CSS, or adapt via your agent with our one-click prompt generator or the Motion MCP.

Motion

174,184 views • 24 days ago

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic

CodeHagen

241,680 views • 1 year ago

Oxfmt is in beta for a month now! 🎉 ◆ 100% Prettier conformance for JS/TS ◆ Seamless migration from Prettier via command ◆ Stable import sorting & Tailwind CSS support ◆ and more! Are you using it already? What is your favorite feature?

Oxfmt is in beta for a month now! 🎉 ◆ 100% Prettier conformance for JS/TS ◆ Seamless migration from Prettier via command ◆ Stable import sorting & Tailwind CSS support ◆ and more! Are you using it already? What is your favorite feature?

VoidZero

19,096 views • 4 months ago

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

jhey ʕ•ᴥ•ʔ

386,721 views • 10 months ago

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨

Simon Vrachliotis

127,870 views • 3 years ago

Inspired by this tweet and group94 memories, I decided to do rebuild some components using their iconic style / motion / sfx. Here's a Select using Base UI and Motion. Should I build more of this? ps: sound on for the full experience.

Inspired by this tweet and group94 memories, I decided to do rebuild some components using their iconic style / motion / sfx. Here's a Select using Base UI and Motion. Should I build more of this? ps: sound on for the full experience.

Lucas Motta

15,005 views • 6 months ago

Here's an example of how I've been using Executor Artifacts I've got a bunch of random Vercel projects that need clean up, Vercel doesn't have a bulk delete in the dashboard One prompt and I get a UI to manage them, using my existing added Vercel API

Here's an example of how I've been using Executor Artifacts I've got a bunch of random Vercel projects that need clean up, Vercel doesn't have a bulk delete in the dashboard One prompt and I get a UI to manage them, using my existing added Vercel API

Rhys

18,601 views • 17 days ago

📣 My newest course is out! 📣 This time we will be building an original SaaS Platform for video calls and summaries with AI Agents 🤖 Are you ready to make 1M ARR 😁? 🤖 Real-time video calls with AI agents 📞 Video and chat powered by Stream 🔐 Authentication handled by Better Auth 💳 Subscription payments via Polar 🧠 AI summaries and context chat using OpenAI ⚙️ Background jobs powered by Inngest 🧑‍💻 Code reviews with CodeRabbit 🗄️ Scalable Postgres database via Neon Postgres 🌐 Built with Next.js 15 and React 19 🎨 Tailwind CSS v4 and shadcn UI for styling 📱 Fully responsive and mobile-friendly 🚀 Ready for production deployment on Vercel

📣 My newest course is out! 📣 This time we will be building an original SaaS Platform for video calls and summaries with AI Agents 🤖 Are you ready to make 1M ARR 😁? 🤖 Real-time video calls with AI agents 📞 Video and chat powered by Stream 🔐 Authentication handled by Better Auth 💳 Subscription payments via Polar 🧠 AI summaries and context chat using OpenAI ⚙️ Background jobs powered by Inngest 🧑‍💻 Code reviews with CodeRabbit 🗄️ Scalable Postgres database via Neon Postgres 🌐 Built with Next.js 15 and React 19 🎨 Tailwind CSS v4 and shadcn UI for styling 📱 Fully responsive and mobile-friendly 🚀 Ready for production deployment on Vercel

Code With Antonio

31,277 views • 1 year ago

This is going to change Data Analytics! A Dashboard UI inside the Jupyter Notebook which makes Visualizing Easy! Using just one line of code and is easy to deploy as well!

This is going to change Data Analytics! A Dashboard UI inside the Jupyter Notebook which makes Visualizing Easy! Using just one line of code and is easy to deploy as well!

Sasi 📊📈

92,200 views • 2 years ago

🥳 Welp, Flux is HEREEEE! 🚀🚀🚀 Flux is a UI component library for Livewire 🎁 26+ components 💅 Modern design 🌬️ Styled with Tailwind 🤖 Custom, lightweight, JS core ⌨️ Accessibile components Hugo and I have given this project everything we've got. Hope you dig it 🔥

🥳 Welp, Flux is HEREEEE! 🚀🚀🚀 Flux is a UI component library for Livewire 🎁 26+ components 💅 Modern design 🌬️ Styled with Tailwind 🤖 Custom, lightweight, JS core ⌨️ Accessibile components Hugo and I have given this project everything we've got. Hope you dig it 🔥

Caleb Porzio ⚡️

192,874 views • 1 year ago

If You're A UI UX Designer, I Just released a video demonstrating how to set up Dark Mode for your designs using Color Variables in Figma And CSS Watch Video Here :

If You're A UI UX Designer, I Just released a video demonstrating how to set up Dark Mode for your designs using Color Variables in Figma And CSS Watch Video Here :

Joseph Brendan

27,056 views • 1 year ago

Copy my dashboard - If you want ✨ Done with the dashboard for Propdock - Been using Cursor + v0 for almost the whole project. All components are from shadcn 🐐 ◆ Examples on how to use server actions ✨ ◆ Charts and stuff 📈 ◆ Feel free to copy it if you want 🔥 The project is Open-source so take what you want. Rest of the weekend im going to write issues for the community 🪄 Tech Stack: Vercel NextAuth.js Prisma Postgres shadcn Neon - Serverless Postgres Resend Tailwind CSS v0 #opensource #buildinpublic #proptech

Copy my dashboard - If you want ✨ Done with the dashboard for Propdock - Been using Cursor + v0 for almost the whole project. All components are from shadcn 🐐 ◆ Examples on how to use server actions ✨ ◆ Charts and stuff 📈 ◆ Feel free to copy it if you want 🔥 The project is Open-source so take what you want. Rest of the weekend im going to write issues for the community 🪄 Tech Stack: Vercel NextAuth.js Prisma Postgres shadcn Neon - Serverless Postgres Resend Tailwind CSS v0 #opensource #buildinpublic #proptech

CodeHagen

60,355 views • 1 year ago

Honored to be highlighted by for our ultra-realistic, human-sounding voices. We love using to deploy our models, and their service and support is next level 💪

Honored to be highlighted by for our ultra-realistic, human-sounding voices. We love using to deploy our models, and their service and support is next level 💪

lily clifford

160,154 views • 8 months ago

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

171,324 views • 3 years ago

the magic of CSS counters ✨ let CSS count your content outside of ordered lists using counters and optional @counter-style reorder/edit DOM content without having to update headings, etc. the styles will update for you 👇

the magic of CSS counters ✨ let CSS count your content outside of ordered lists using counters and optional @counter-style reorder/edit DOM content without having to update headings, etc. the styles will update for you 👇

jhey ʕ•ᴥ•ʔ

143,806 views • 1 year ago