Criando UI no React na velocidade da luz! (shadcn/ui)
Summary
TLDRThe video demonstrates building a product listing page with React, TypeScript, and the ShadCN UI library. It starts by initializing a new project, installing dependencies like Twind and Lucid Icons, and importing ShadCN components. It then constructs a products table with mock data, a filter form, and add product modal dialog using ShadCN's ready-made accessible components. Customizations are made like adding icons, styling buttons, and positioning elements. Overall, it leverages ShadCN's pre-built components to quickly build a functional web interface with a clean, modern design.
Takeaways
- 😀 Builds a React project with Typescript from scratch
- 👨💻 Uses common libraries like React, Typescript, Vite, Tailwind
- 📦 Installs and configures UI component library ShadCN
- 🎨 Customizes ShadCN theme and styles
- 🏗️ Structures app layout with Flexbox and Grid
- 📋 Creates a products table with filtering
- 👷♂️ Uses form to add modal dialog for new product
- 🗃️ Saves new products to list with React state
- ⛓️ Links form dialog open/close to button clicks
- ✅ Creates complete CRUD app workflow for products
Q & A
What framework is being used to build the application?
-The application is being built using React and TypeScript.
What UI library is used for styled components?
-The ShadCN UI library is used which builds on top of Twind for styled components.
How are modal dialogs implemented?
-The ShadCN dialog components are used to implement modal dialogs and popups.
How is form input handling implemented?
-Form inputs use ShadCN input components to handle user input.
How are tables and tabular data displayed?
-The ShadCN table components are used to display tabular and grid data.
How is conditional component rendering achieved?
-React's conditional rendering capabilities are leveraged to show/hide components.
How are icons and vectors implemented in the UI?
-The Lucid React icon library is used to render icons and vector graphics.
How is component state management handled?
-React state and hooks are used for local component state management.
How are styles modularized?
-Twind CSS is used in conjunction with CSS modules for component-scoped styles.
What build tools are used?
-Vite is used as the build toolchain along with TypeScript compiler.
Outlines
😊 Setting up the React project with Typescript
The paragraph describes setting up a new React project with Typescript. It shows installing dependencies like Twind and ShadCN UI library, configuring ESLint, TypeScript, etc., and generating ShadCN components like Button, Table, Dialog. The goal is to build a products listing table and a form to add new products.
👨💻 Building the products listing table
The paragraph shows constructing a products listing table with columns like ID, Product, Price. It uses ShadCN's Table component and loops over mock data to generate rows. It also adds a header, buttons for New Product and Filter, and input fields to filter products by ID and name.
📝 Adding modal dialog to create new products
The paragraph demonstrates creating a modal dialog that opens on clicking New Product button. It uses ShadCN's Dialog component and shows the markup for header, content with a form, and footer with action buttons. The form inside allows entering details like product name and price to create a new record.
Mindmap
Keywords
💡React
💡TypeScript
💡twind
💡shadcn
💡lucid
💡Modal
💡Grid
💡Component
💡Props
💡State
Highlights
Creating a new project named URL TR http with React and TypeScript.
Setting up the project environment in VS Code and installing dependencies.
Removing unnecessary files and configurations for a clean project setup.
Introduction to using Shadn library for easy component styling with Twind.
Configuring Twind for styled components and initiating Shadn UI setup.
Adjusting TS config and Vit config as per Shadn UI documentation for project compatibility.
Installing types for Node.js and customizing import paths.
Selecting component style preferences and setting up global CSS with Shadn UI.
Choosing a color theme for the application and integrating Shadn UI components.
Adding Shadn UI components to the project for a responsive and styled interface.
Implementing a simple UI interface with table and form elements using Shadn UI.
Customizing components directly in the codebase for visual adjustments.
Utilizing Lucid React for additional icons and enhancing button aesthetics.
Creating a modal for new product entry with dialog components from Shadn UI.
Finalizing the product list and new product form interface, incorporating feedback mechanisms for user interaction.
Transcripts
vou criar aqui uma pastinha e vou criar
um projeto
Vit eu vou chamar ele de URL TR http
state vou criar el com react
typescript Vamos abrir ele aqui no vest
code instalar as dependências E aí eu
vou remover aqui readm aqui no index
removo
favicon vamos botar aqui no título URL
htp
state remover o SL
lint remover aqui
assets remover o CSS ah tirar as
importações
tirar tudo
aqui
beleza tá aqui nosso projeto E aí eu vou
criar uma interface simples aqui usando
shaden não sei se vocês já usaram mas eu
adoro usar essa biblioteca PR facilidade
ele é basicamente uma série de
componentes prontos estilizados com
twind mas o grande diferencial dessa
biblioteca para outras como Bootstrap ou
sei lá qualquer biblioteca que traga
componentes prontos é que a gente não
instala os Sim a gente copia os
componentes pra nossa code base assim
fica mais fácil a gente alterar esses
componentes caso a gente precise
alterá-los visualmente para funcionar no
nosso app então aqui que que eu vou
fazer ó vou começar instalando o twind
po CSS Auto prefixer e rodando o comando
de init do twind para ele criar um
arquivo de configuração do twind então
eu rodo esses dois comandos e pronto já
criou aqui ó o twind config E aí a gente
vai seguir basicamente o guia de
instalação do do shats Nui Eu Vou Abrir
Meu TS config p Jason como ele pede aqui
e aqui dentro de compiler options eu vou
jogar essa opção aqui que é basicamente
para fazer um remap do path né fazer as
importações começando com @ E aí eu vou
instalar este pacote Opa pnpm
install types node e vou alterar o meu
arquivo do Vit config para Como está
sendo pedido ali na documentação E aí eu
vou rodar o comando init aqui do shad n
que ele vai fazer algumas perguntas aqui
para
mim essas perguntas que são se eu tô
usando typescript sim ah qual que é o
default dos componentes o estilo dos
componentes vou selecionar aqui o New
York ele deixa os componentes um
pouquinho menores Qual que é a
tonalidade de Cinza que eu quero usar na
minha aplicação tem várias são as
tonalidades de Cinza do twind se você
tiver dúvidas aqui é você você pode
entrar
Ah aqui no na documentação do twind
dentro de Colors aqui ó ele tem
tonalidad slate que é puxada pro Azul
Grey é um pouquinho puxada para Azul Zin
é totalmente Cinza o neutral vai puxando
um pouquinho pro amarelo marrom e o
Stone também eu vou usar
aqui o slate mesmo aonde que eu vou
colocar meu CSS Global eu vou botar ele
dentro de sear bar
global.css se eu quero usar variáveis
CSS vou botar assim e se eu tô usando
algum prefix no
tnd não e onde que tá meu arquivo de
furação do Tent que é exatamente essa
localização meus componentes pode ser @
components Lib utils se eu tô usando
server components aqui não porque eu não
tô usando next e Yes para ele escrever o
arquivo e agora ele vai instalar algumas
dependências E aí a gente vai começar
instalando aqui alguns componentes do
shad CN que a gente vai utilizar então
eu quero criar basicamente uma tabela e
um formulário pra gente inserir alguns
Campos então eu vou rodar aqui o pnpm
DLX shads add e eu vou instalar alguns
componentes Então vamos lá eu vou
instalar aqui dentro o Button E aí eu
dou um espaço instalo outro eu vou botar
o
table O dialog que é o
modal o input o
Label
pagination deixa eu ver o que mais Bot
hum não
botar text area não toast Não por
enquanto tá bom botar só esses
componentes aqui e aí como eu falei A
grande diferença do shad CN é que se
depois eu esqueci algum instalo aqui
mais Ah é que diferente de outras
bibliotecas de componentes ele não
vai ele vai copiar o código dos
componentes para dentro da nossa
aplicação E aí a gente pode customizar
esses componentes como a gente preferir
então aqui dentro de components ó ui tá
todo o código dos componentes aqui do
chat senen botão dialog input Label por
baixo dos panos né os componentes do
chat senen Y eles usam o hadix ui não é
melhor usar o sonor para toast na
verdade tá aqui o shaden ui ele usa o
sonor Né o o chat cny liberou uma
integração com o sonor então ele usa
também o sonor por baixo dos PS e aqui
que que a gente vai fazer
Ah eu vou agora no meu aqui
importar o meu global.css E aí já posso
ver que lá na minha aplicação ele vai
resetar os estilos né E aí agora a gente
vai criar uma uma interface aqui vamos
lá no meu App agora que que eu vou fazer
vou começar adicionando
algumas estilizações
aqui vou criar aqui uma
div
[Música]
Vou importar o table que vem lá do meu
do meu do shad E aí eu tenho table head
ou melhor table header
primeiro que seria o meu th head E aí eu
tenho table head para cada coluna então
criar aqui algumas colunas ID produto
preço ah a gente já pode ver a nossa
tabela ali em cima Ah vamos botar um
rounded aqui para ficar arredondado
Ah vamos criar aqui o table Body E aí eu
tenho um table Row que é para cada linha
da tabela E aí eu vou ter um table Cell
para cada para cada coluna né então vou
botar um ID aqui
fictício um produto vou botar sei lá
e produto 0 e um preço
19200 sei lá qualquer coisa assim e
agora a gente vai replicar esse table
Row algumas vezes então eu vou usar aqui
um Array from length botar aqui 10 map
Opa escrevi length errado quem nunca
né E aí eu pego o índice
retorno e uso o índice aqui dentro na
aqui pronto agora eu tenho isso
replicado algumas vezes e posso usar o
índice aqui dentro no nome do produto
para também ter nome diferente pronto
Nossa tabela já tá aqui dentro eu vou
adicionar um pouquinho de padding aqui
nessa div para não ficar tão colado e
aumentar um pouquinho o arredondamento
da borda perfeito
Ah e
agora que que a gente vai fazer aqui
dentro eu vou adicionar
uma
sessão de criação de um novo um novo
produto
então eu vou
é criar aqui em cima da nossa tabela vou
criar uma div essa div aqui eu vou
colocar nela um Class name
e Flex
items Center e
justify between Ah para ela separar aqui
eu vou ter um botão que eu vou importar
lá do do shad cen Ah ele vai ser novo
produto isso aqui na verdade tem que est
fora
aqui beleza agora
sim vou dar aqui um Space y4 para
separar um pouquinho e aí aqui agora
além do novo produto eu vou ter um
formulário para filtros Então vou criar
aqui um
form dentro desse form aqui eu vou usar
o input que vem do sh eu vou deixar ele
filtrar pelo id do pedido então filtro
pelo id botar aqui um Place holder ID do
pedido então já tá lá o nosso filtro
aqui no for eu vou usar nele um Flex
items Center com um GAP do para
distanciar cada input aqui no input eu
quero que el não que ele ocupe uma uma
largura automática e não que ele ocupe a
tela toda esse form aqui eu vou botar na
verdade dentro dessa div aqui para ele
ficar alinhado pra
esquerda Ah beleza Já tá aqui ó agora eu
vou colocar mais um input que é para eu
filtrar pelo nome do produto e aqui vai
ser a name Deixa eu ver se eu não
preciso disso aqui agora eu acho que
preciso não não preciso pronto e aí eu
vou colocar aqui dentro um botão também
Type submit filtrar resultados E aí o
chat CN ele traz pros botões algumas
variantes que é para eu escolher um
formato diferente eu vou usar o tem o
secondary aqui vou usar o outline ó que
ele deixa não outline não ficou feio PR
Caramba vou usar o o secondary mesmo que
ele deixa o botão mais apagadinho assim
mas daí parece que tá desabilitado né
vou usar aqui o Ghost deixa eu ver Ghost
não ficou feio PR caramba link pode ser
o link E aí eu vou fazer o seguinte
dentro desse botão aqui vou botar um
Icone Zinho para ficar mais bonito Então
vou instalar o lucid react E aí eu
importo aqui do lucid react o botão o
ícone de search ah e o ícone de Plus
Plus Circle então eu vou jogar aqui
nesse botão o o ícone search vou deixar
aqui nele um W3 H3 MR2 para dar uma
distanciada acho que ele ficou um pouco
pequeno
demais show agora a gente vai fazer a
mesma coisa no novo
produto porém usando o icon
Plus que que eu fiz ah Plus C já tá lá
show então a gente por último vai
adicionar aqui em cima um
H1 produtos para construir a experiência
de uma tela n botar um text 4xl melhor
3xl Font b e pronto temos Nossa lista de
produtos e agora o que eu quero fazer eu
quero clicar em novo produto e abrir um
modal né E aí a gente pode usar o dialog
que vende do do sh n então aqui por
volta do novo produt
eu vou colocar um
dialog que vem do
Chad fechar ele aqui embaixo por volta
do botão eu preciso botar um
dialog
Trigger e nesse dialog Trigger Eu uso as
child para que o botão que esteja dentro
dele funcione como Trigger para abrir o
modal E aí eu boto o dialog content para
ser o conteúdo então se eu escrevo hello
world aqui dentro quando eu clico em
novo produto agora ele abre um modal
escrito hello world E aí a gente vai
nesse modal aqui usar o dialog header
com um dialog title aqui dentro escrito
novo produto a gente vai usar o dialog
description criar um novo produto no
sistema se lá qualquer coisa só para
ficar um pouquinho mais bonito a gente
vai ter o nosso o
nosso conteúdo aqui
dentro que eu vou botar dentro deixa eu
ver aqui
hã dentro de um form e no final eu vou
ter ainda dentro desse form o meu dialog
footer que é onde vão est os meus botões
então eu vou ter um botão para salvar
que o Type dele vai ser submit e eu vou
ter um botão para cancelar onde o Type
dele vai ser Button mesmo e eu vou botar
uma variante nele Ah destructive então
agora eu ah ficou meio feio isso aqui
botar variante Ghost
hum
variante
outline assim ficou show
ó beleza e agora dentro do form eu vou
criar os meus inputs então eu tenho o
nome do produto e o preço basicamente eu
vou criar uma div
e e aqui no form eu vou dar um Class
name Space Y 6 para separar os campos
essa div aqui eu vou botar um Grid a
Grid
C fazer um Grid de seis colunas e aí eu
vou usar a Label que importa do shad c
produto input
ã Grid col quro eu vou usar na verdade e
aí no input eu boto a co Spa 3 para ele
ocupar três colunas então vai ficar mais
ou menos assim ó aqui no Grid eu preciso
botar items Center para centralizar a
Label e text right para botar a Label
ali na direita e um GAP 2 para
distanciar GAP 3 PR distanciar a Label
do input E aí eu vou fazer isso HTML for
name e aqui eu boto um ID name e replico
esse campo aqui embaixo para o preço do
produto
ã Price Price Beleza a gente já tem uma
interface aqui para cadastro de produto
e listagem de produto eu preciso que o
botão aqui de cancelar ele Feche o modal
Então por volta dele aqui eu posso botar
um dialog
close e botar um as child também E aí
basicamente quando eu clico agora ele
fecha o modal automaticamente beleza
Tudo
pronto
تصفح المزيد من مقاطع الفيديو ذات الصلة
Flowbite Crash Course in 20 mins | Introduction to UI components using Tailwind CSS
ReactJS - Let's Build An Invoice App - PART 1
Belajar FIGMA dasar dengan Mudah - Belajar Figma Bareng (1/3)
Föreläsning: Designelement
Introducing Blazor Components [Pt 3] | Front-end Web Development with .NET for Beginners
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 4
React tutorial for beginners ⚛️
5.0 / 5 (0 votes)