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
40
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
130
みんなのPython勉強会#100 LT枠 参照カウントから見るPythonのメモリ管理
tamtam0423
4
1.3k
Understanding Metaclass from Type
tamtam0423
0
36
みんなのPython勉強会_LT枠_10_12__5分で理解するディスクリプタ.pdf
tamtam0423
2
750
めぐろLT_ Pythonの弱参照(weakref)を使えば、世界はもっと良くなる
tamtam0423
0
550
みんなのPython勉強会#96 LT枠
tamtam0423
0
180
NoCodeツールでWebHookからDWHへのデータの転送処理を爆速で実装した話
tamtam0423
0
320
Other Decks in Technology
See All in Technology
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
410
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Unsuck your backbone
ammeep
669
57k
Documentation Writing (for coders)
carmenintech
67
4.6k
Bash Introduction
62gerente
610
210k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Six Lessons from altMBA
skipperchong
27
3.6k
A Tale of Four Properties
chriscoyier
158
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Gamification - CAS2011
davidbonilla
80
5.1k
Producing Creativity
orderedlist
PRO
343
39k
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 !