Liveblocks

借助 Radix Primitives，我们能够创建高质量的自定义 UI，其行为类似于原生元素，而无需花费数周时间。我们可以将时间花在核心产品上。

¥With Radix Primitives, we’re able to create a high-quality custom UI that behaves like native elements—without spending weeks on it. Instead, we can spend that time on our core product.

请描述一下你正在使用 Radix Primitives 的项目类型？

¥Describe the type of project you are using Radix Primitives on?

Liveblocks 设计系统依赖于 Radix Primitives、Tailwind CSS 和 React。它的结构使我们能够在营销网站、文档网站和产品仪表盘上使用颜色、字体、阴影等基元以及一组选定的组件。

¥The Liveblocks design system relies on Radix Primitives, Tailwind CSS, and React. It is structured in a way that enables us to use primitives such as colors, fonts, and shadows and a selected set of components on our marketing site, documentation site, and product dashboard.

由于所有内容都在 Next.js 上运行，这使得我们可以在不同平台上保持品牌一致性，同时仍然可以自由地创建特定于平台的 UI 模式。我最初设计和设置了这个系统，但现在它由我们团队的设计工程师维护和改进。

¥Since everything runs on Next.js, this allows us to keep things on brand across different platforms, while still giving us the freedom to create platform-specific UI patterns. I originally designed and set up the system, but it’s now maintained and improved by the Design Engineers on our team.

Radix Primitives 在哪些方面帮助了你和你的公司？

¥In what ways have Radix Primitives helped you and your company?

在之前的公司，我设计并构建了一个自定义菜单组件。正是在那时，我才意识到，创建一个外观和行为都像原生 macOS 菜单一样的东西是多么困难和耗时。菜单项可以无限嵌套，需要考虑屏幕空间，输入时需要自动选择第一个匹配的项，等等……

¥At a previous company, I designed and built a custom menu component. That’s when I learned how difficult and time consuming it was to create something that looked and behaved like a native macOS menu. Menu items can be infinitely nested, screen real-estate has to be taken into consideration, typing needs to automatically select the first item that matches, and the list goes on…

Radix Primitives 能够出色地处理所有这些内容。借助 Radix Primitives，我们能够创建高质量的自定义 UI，其行为类似于原生元素，而无需花费数周时间。我们可以将时间花在核心产品上。目前，我们在对话框、警告对话框、菜单、上下文菜单、滚动区域和工具提示中使用 Radix 基元。我们团队的 Marc Bouchenoire 最近还将我们网站的主导航也转换为使用 NavigationMenu，以提高可访问性。

¥Radix Primitives handle all that stuff incredibly well. With Radix Primitives, we’re able to create a high-quality custom UI that behaves like native elements—without spending weeks on it. Instead, we can spend that time on our core product. As it stands today, we use Radix Primitives for our Dialog, Alert Dialog, Menu, Context Menu, Scroll Area, and Tooltip. Marc Bouchenoire on our team also recently converted our website main navigation to use NavigationMenu as well to improve accessibility.

你对 Radix 开发者体验有何看法？

¥What are your thoughts on Radix developer experience?

我喜欢我们只将需要的组件安装到代码库中。这让我们可以轻松地一次转换一个组件。但我真正最喜欢的是组件完全没有样式，这使我们能够按照自己想要的方式组合组件，甚至可以使用 Tailwind CSS 来设置样式。

¥I like that we can only install the components we need into our code base. This made it easy for us to convert things over one component at a time. But what I really like most is that components come completely unstyled which enables us to compose things the way we want, and even use Tailwind CSS to style things.

你对 Radix 文档有何看法？

¥What are your thoughts on Radix docs?

文档很棒。这些示例使理解其工作原理变得非常容易。我还研究了 Modulz 设计系统，了解你如何使用 Radix，并从中获得了很多启发。

¥The documentation is great. The examples make it very easy to understand how things work. I also looked at Modulz design system to see how you were using Radix on your side and definitely took a lot of inspiration from that.