Creating a command palette in React, TypeScript, TailwindCSS using KBar | Tutorial

preview_player
Показать описание

🕑 TIMESTAMPS:
00:00 What we'll be building
2:40 Setting up TailwindCSS
6:51 Introducing KBar
8:17 Setting up KBar
8:48 Creating default actions
13:04 Creating the command palette
38:36 Adding final touches
41:07 Conclusion

🔗 LINKS:

💬 FOLLOW ME FOR UPDATES:

💻 MY PROJECTS & CODE:

🏷️ TAGS:
#React #TailwindCSS #JavaScript #TypeScript #vsnthdev

👏 Have an awesome day!
  1. Vasanth Srivatsa
Рекомендации по теме
Creating a Command 0:47:54

Creating a Command Palette in Imba

Building a command 0:38:00

Building a command palette with Tailwind CSS, React, and Headless UI

New PowerToys Module, 0:12:08

New PowerToys Module, Windows Command Palette!

Creating a command 0:42:36

Creating a command palette in React, TypeScript, TailwindCSS using KBar | Tutorial

Command Palette | 0:10:30

Command Palette | UX Patterns #1

Stately Stream: Creating 0:43:55

Stately Stream: Creating a Command Palette

Extending your application 0:13:13

Extending your application with the new PowerToys Command Palette | DEM571

New feature: Command 0:00:53

New feature: Command Palette ⌨️

How to add 0:07:46

How to add custom commands to the Command Palette in Textual

Revolutionize Your Coding 0:03:43

Revolutionize Your Coding Workflow with VS Code's Command Palette

Build with Ben: 1:14:55

Build with Ben: Building a Command Palette with Vue 3 (Part 1)

Customizing Commands in 0:04:54

Customizing Commands in the Tool Palette - BricsCAD

Create a Customizable 0:01:16

Create a Customizable Command Palette for Your Web App | Unique Coding Project

How to make 0:02:25

How to make your app's features searchable with a command palette

Command Palette in 0:08:13

Command Palette in React 18

Do everything with 0:00:23

Do everything with Command Palette in VSCode #coding #developer #css #htmlcss

Command palette demo 0:02:51

Command palette demo

Build with Ben 1:19:04

Build with Ben #31: Building a Command Palette (Pt 2)

[QT24] The FAST 0:07:38

[QT24] The FAST and EASY way to add command palette entries in Sublime Text

Command Palette Magic 0:01:00

Command Palette Magic 🪄 #vscode #coding #programming

Handy VS CODE 0:05:10

Handy VS CODE Command Palette

Command palette | 0:00:30

Command palette | Deepnote

[QT18] Easily add 0:03:49

[QT18] Easily add to the Sublime Command Palette with these simple steps

Command Palettes are 0:00:19

Command Palettes are literally everywhere

Комментарии
Автор

Hi, nice video, please what is the theme and font you are using on vscode?

unorodeo
Автор

Hi Vasanth,
I was working with KBar to create a search engine for my app.

saw your comment on of the issues in the KBar repo.
Was curious how you achieved it.
Anyway to connect and chat ?

sk-sky
Автор

This is 80% Tailwind (which im not using anyways), 19% KBar, 0.5% typescript, 0.5% react. I was waiting you go more in depth with KBar such as getting the actions dynamically but you are just simply implementing the Kbar documentation in a video spending my precious 40 minutes. So, this time a downvote. Sorry!

ilirbajrami
welcome to shbcf.ru