Загрузка видео...

Не удалось загрузить видео

На главную

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

RoyQuilor's profile picture

Roy Quilor

1,284 subscribers

65,130 просмотров • 3 лет назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 9

Фото профиля Lee Robinson
Lee Robinson3 лет назад

Looks really good!

Фото профиля Roy Quilor
Roy Quilor3 лет назад

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

Фото профиля Preston Bourne
Preston Bourne3 лет назад

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

Фото профиля Roy Quilor
Roy Quilor3 лет назад

@saintprestonn Good idea. I will make it

Фото профиля Peer Richelsen — oss/acc
Peer Richelsen — oss/acc3 лет назад

YOOO lets turn this into a #nostr client

Фото профиля Roy Quilor
Roy Quilor3 лет назад

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

Фото профиля Hasira 🥃🪴
Hasira 🥃🪴3 лет назад

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

Фото профиля Roy Quilor
Roy Quilor3 лет назад

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

Фото профиля Roy Quilor
Roy Quilor3 лет назад

Thanks Tiago

Похожие видео

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
0:20

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 просмотров • 1 год назад

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. ⬇️
0:25

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 просмотров • 3 лет назад

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.
0:25

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 просмотров • 24 дней назад

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
0:47

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 просмотров • 1 год назад

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?
1:09

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 просмотров • 4 месяцев назад

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! 🧑‍🍳
0:36

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 просмотров • 10 месяцев назад

🔥 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 ✨
2:19

🔥 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 просмотров • 3 лет назад

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.
0:33

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 просмотров • 5 месяцев назад

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
0:48

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 просмотров • 16 дней назад

📣 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
5:37

📣 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 просмотров • 1 год назад

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!
0:22

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 просмотров • 2 лет назад

🥳 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 🔥
36:30

🥳 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 просмотров • 1 год назад

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 :
0:43

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 просмотров • 1 год назад

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
0:57

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 просмотров • 1 год назад

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 💪
2:29

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 просмотров • 8 месяцев назад

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 👇
0:36

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 просмотров • 3 лет назад

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 👇
0:38

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 просмотров • 1 год назад