Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Developing UI Components Integrating Radix Prim...
Search
Yusuke Tamura
August 24, 2024
Technology
0
23
Developing UI Components Integrating Radix Primitives with Custom CSS
https://japanglish.connpass.com/event/323995/
2024/08/21 JapanglishTechTalk#2
NOVASELL.INC Tamtam
Yusuke Tamura
August 24, 2024
Tweet
Share
More Decks by Yusuke Tamura
See All by Yusuke Tamura
Which should be designed first, the data model or the domain model
tamtam0423
0
100
みんなのPython勉強会#100 LT枠 参照カウントから見るPythonのメモリ管理
tamtam0423
4
1.2k
Understanding Metaclass from Type
tamtam0423
0
35
みんなのPython勉強会_LT枠_10_12__5分で理解するディスクリプタ.pdf
tamtam0423
2
660
めぐろLT_ Pythonの弱参照(weakref)を使えば、世界はもっと良くなる
tamtam0423
0
430
みんなのPython勉強会#96 LT枠
tamtam0423
0
150
NoCodeツールでWebHookからDWHへのデータの転送処理を爆速で実装した話
tamtam0423
0
290
Other Decks in Technology
See All in Technology
AI でアップデートする既存テクノロジーと、クラウドエンジニアの生きる道
soracom
PRO
2
400
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
9.5k
セキュリティ監視の内製化 効率とリスク
mixi_engineers
PRO
7
910
ロボットアームを遠隔制御の話 & LLMをつかったIoTの話もしたい
soracom
PRO
1
270
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
1
160
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
120
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
240
疎通2024
sadnessojisan
5
1k
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
260
四国のあのイベントの〇〇システムを45日間で構築した話 / cloudohenro2024_tachibana
biatunky
0
310
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
41
13k
不動産売買取引におけるAIの可能性とプロダクトでのAI活用
zabio3
0
230
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
It's Worth the Effort
3n
182
27k
Designing for humans not robots
tammielis
248
25k
How STYLIGHT went responsive
nonsquared
93
5.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Typedesign – Prime Four
hannesfritz
39
2.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
18k
How to Think Like a Performance Engineer
csswizardry
16
950
Optimising Largest Contentful Paint
csswizardry
30
2.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Speed Design
sergeychernyshev
22
420
Transcript
@ 2024 Novasell, Inc. All Rights Reserved. Developing UI Components
Integrating Radix Primitives with Custom CSS 2024/08/21 JapanglishTechTalk#2 NOVASELL.INC Tamtam 1
@ 2024 Novasell, Inc. All Rights Reserved. Tamtam( @TamtamFitness) Host
of Japanglish Tech Talk 🌏 Currently working at RAKSUL/NOVASELL📃📺 Married to a Chinese-Indonesian
@ 2024 Novasell, Inc. All Rights Reserved. 3 https://techblog.raksul.com/ RAKSUL
TechBlog 社員インタビュー https://recruit.raksul.com/story/archives/engineer/ RAKSUL 公式connpass https://raksul.connpass.com/ https://www.youtube.com/channel/UCyihWcvrHmE e-edcqdcJFsQ/ RAKSUL 公式YouTube RAKSUL 公式X https://twitter.com/raksuldev Find out more about RAKSUL RAKSUL 紹介 https://speakerdeck.com/raksulrecruiting/raksul-introduction
@ 2024 Novasell, Inc. All Rights Reserved. 4 Radix UI
@ 2024 Novasell, Inc. All Rights Reserved. 5 Radix UI
: Open Source UI Component Library https://www.radix-ui.com/themes/docs/components/radio-group
@ 2024 Novasell, Inc. All Rights Reserved. 6 Radix Primitives:
Headless UI Component https://www.radix-ui.com/primitives/docs/overview/getting-started
@ 2024 Novasell, Inc. All Rights Reserved. 7 Headless UI
Component
@ 2024 Novasell, Inc. All Rights Reserved. 8 Headless UI
Component provides behavior only, styling is given to the developer. Headless UI
@ 2024 Novasell, Inc. All Rights Reserved. 9 General UI
Library vs Custom Design Hard to maintain Mismatch with custom design Override style
@ 2024 Novasell, Inc. All Rights Reserved. 10 Easy to
maintain Separate style Add style with Headless UI Component
@ 2024 Novasell, Inc. All Rights Reserved. 11 Rough Headless
UI Component Library Comparison
@ 2024 Novasell, Inc. All Rights Reserved. 12 Actual Use
of Radix Primitives
@ 2024 Novasell, Inc. All Rights Reserved. 13 https://www.radix-ui.com/primitives/case-studies/vercel
@ 2024 Novasell, Inc. All Rights Reserved. 14 https://www.radix-ui.com/primitives/case-studies/supabase
@ 2024 Novasell, Inc. All Rights Reserved. 15 https://ui.shadcn.com/ shadcn/ui
: UI Component Library buit using Radix Primitives and Tailwind CSS
@ 2024 Novasell, Inc. All Rights Reserved. 16 RAKSUL also
uses Radix Primitives in practice
@ 2024 Novasell, Inc. All Rights Reserved. 17 RAKSUL has
a css library called “kamii-css”, which is one of the design systems It's a tailwindcss-based style library.
@ 2024 Novasell, Inc. All Rights Reserved. 18 pseudo code
of avatar using Radix Primitives and kamii-css
@ 2024 Novasell, Inc. All Rights Reserved. 19 My impression
for Radix Primitives
@ 2024 Novasell, Inc. All Rights Reserved. 20 Implementation of
complex components lowers man-hours. https://www.radix-ui.com/primitives
@ 2024 Novasell, Inc. All Rights Reserved. 21 Sometimes I
want to implement a component using only Radix Primitives.
@ 2024 Novasell, Inc. All Rights Reserved. 22 For simple
items such as CheckBox, it is less time-consuming to write them in HTML without using Radix Primitives (personal opinion).
@ 2024 Novasell, Inc. All Rights Reserved. 23 Reference •
Radix UI • shadcn/ui • Tailwind CSS • styles,Kamii | Raksul Design System • ヘッドレスUIコンポーネントでいこう -- Radix UI + Stitches がいい感じ
@ 2024 Novasell, Inc. All Rights Reserved. 24 Thank you
for listening !