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
46
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
150
みんなのPython勉強会#100 LT枠 参照カウントから見るPythonのメモリ管理
tamtam0423
4
1.3k
Understanding Metaclass from Type
tamtam0423
0
42
みんなのPython勉強会_LT枠_10_12__5分で理解するディスクリプタ.pdf
tamtam0423
2
770
めぐろLT_ Pythonの弱参照(weakref)を使えば、世界はもっと良くなる
tamtam0423
0
580
みんなのPython勉強会#96 LT枠
tamtam0423
0
190
NoCodeツールでWebHookからDWHへのデータの転送処理を爆速で実装した話
tamtam0423
0
330
Other Decks in Technology
See All in Technology
IAMのマニアックな話 2025 ~40分バージョン ~
nrinetcom
PRO
8
910
大規模アジャイル開発のリアル!コミュニケーション×進捗管理×高品質
findy_eventslides
0
500
SpannerとAurora DSQLの同時実行制御の違いに想いを馳せる
masakikato5
0
570
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
140
ウェブアクセシビリティとは
lycorptech_jp
PRO
0
260
パスキーでのログインを 実装してみよう!
hibiki_cube
0
660
チームの性質によって変わる ADR との向き合い方と、生成 AI 時代のこれから / How to deal with ADR depends on the characteristics of the team
mh4gf
4
330
ソフトウェア開発におけるインターフェイスという考え方 / PHPerKaigi 2025
k1low
9
3.9k
スケールアップ企業のQA組織のバリューを最大限に引き出すための取り組み
tarappo
4
930
AWS のポリシー言語 Cedar を活用した高速かつスケーラブルな認可技術の探求 #phperkaigi / PHPerKaigi 2025
ytaka23
7
1.5k
AIエージェント完全に理解した
segavvy
4
260
Multitenant 23ai の全貌 - 機能・設計・実装・運用からマイクロサービスまで
oracle4engineer
PRO
2
120
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
Music & Morning Musume
bryan
46
6.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Facilitating Awesome Meetings
lara
53
6.3k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Fireside Chat
paigeccino
37
3.3k
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 !