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
74
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
190
みんなのPython勉強会#100 LT枠 参照カウントから見るPythonのメモリ管理
tamtam0423
4
1.5k
Understanding Metaclass from Type
tamtam0423
0
51
みんなのPython勉強会_LT枠_10_12__5分で理解するディスクリプタ.pdf
tamtam0423
2
880
めぐろLT_ Pythonの弱参照(weakref)を使えば、世界はもっと良くなる
tamtam0423
0
730
みんなのPython勉強会#96 LT枠
tamtam0423
0
220
NoCodeツールでWebHookからDWHへのデータの転送処理を爆速で実装した話
tamtam0423
0
380
Other Decks in Technology
See All in Technology
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
660
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.4k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
240
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
2
620
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
320
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
130
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
220
アイテムレビュー機能導入からの学びと改善
zozotech
PRO
0
140
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
120
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
6
1.3k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
How to train your dragon (web standard)
notwaldorf
97
6.3k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Become a Pro
speakerdeck
PRO
29
5.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
What's in a price? How to price your products and services
michaelherold
246
12k
The Invisible Side of Design
smashingmag
302
51k
Balancing Empowerment & Direction
lara
4
690
Context Engineering - Making Every Token Count
addyosmani
6
250
Practical Orchestrator
shlominoach
190
11k
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 !