Developing UI Components Integrating Radix Primitives with Custom CSS

https://japanglish.connpass.com/event/323995/

2024/08/21 JapanglishTechTalk#2
NOVASELL.INC Tamtam

Transcript

1. @ 2024 Novasell, Inc. All Rights Reserved. Developing UI Components Integrating Radix Primitives with Custom CSS 2024/08/21 JapanglishTechTalk#2 NOVASELL.INC Tamtam 1
2. @ 2024 Novasell, Inc. All Rights Reserved. Tamtam( @TamtamFitness) Host of Japanglish Tech Talk 🌏 Currently working at RAKSUL/NOVASELL📃📺 Married to a Chinese-Indonesian 󰏙
3. @ 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 公式Ｘ https://twitter.com/raksuldev Find out more about RAKSUL RAKSUL 紹介 https://speakerdeck.com/raksulrecruiting/raksul-introduction
4. @ 2024 Novasell, Inc. All Rights Reserved. 4 Radix UI
5. @ 2024 Novasell, Inc. All Rights Reserved. 5 Radix UI : Open Source UI Component Library https://www.radix-ui.com/themes/docs/components/radio-group
6. @ 2024 Novasell, Inc. All Rights Reserved. 6 Radix Primitives: Headless UI Component https://www.radix-ui.com/primitives/docs/overview/getting-started
7. @ 2024 Novasell, Inc. All Rights Reserved. 7 Headless UI Component
8. @ 2024 Novasell, Inc. All Rights Reserved. 8 Headless UI Component provides behavior only, styling is given to the developer. Headless UI
9. @ 2024 Novasell, Inc. All Rights Reserved. 9 General UI Library vs Custom Design Hard to maintain Mismatch with custom design Override style
10. @ 2024 Novasell, Inc. All Rights Reserved. 10 Easy to maintain Separate style Add style with Headless UI Component
11. @ 2024 Novasell, Inc. All Rights Reserved. 11 Rough Headless UI Component Library Comparison
12. @ 2024 Novasell, Inc. All Rights Reserved. 12 Actual Use of Radix Primitives
13. @ 2024 Novasell, Inc. All Rights Reserved. 13 https://www.radix-ui.com/primitives/case-studies/vercel
14. @ 2024 Novasell, Inc. All Rights Reserved. 14 https://www.radix-ui.com/primitives/case-studies/supabase
15. @ 2024 Novasell, Inc. All Rights Reserved. 15 https://ui.shadcn.com/ shadcn/ui : UI Component Library buit using Radix Primitives and Tailwind CSS
16. @ 2024 Novasell, Inc. All Rights Reserved. 16 RAKSUL also uses Radix Primitives in practice
17. @ 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.
18. @ 2024 Novasell, Inc. All Rights Reserved. 18 pseudo code of avatar using Radix Primitives and kamii-css
19. @ 2024 Novasell, Inc. All Rights Reserved. 19 My impression for Radix Primitives
20. @ 2024 Novasell, Inc. All Rights Reserved. 20 Implementation of complex components lowers man-hours. https://www.radix-ui.com/primitives
21. @ 2024 Novasell, Inc. All Rights Reserved. 21 Sometimes I want to implement a component using only Radix Primitives.
22. @ 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).
23. @ 2024 Novasell, Inc. All Rights Reserved. 23 Reference • Radix UI • shadcn/ui • Tailwind CSS • styles,Kamii | Raksul Design System • ヘッドレスUIコンポーネントでいこう -- Radix UI + Stitches がいい感じ
24. @ 2024 Novasell, Inc. All Rights Reserved. 24 Thank you for listening !