案例研究

Liveblocks

借助 Radix Primitives,我们能够创建高质量的自定义 UI,其行为方式与原生元素类似,而无需花费数周时间。相反,我们可以将这些时间用于我们的核心产品。

描述您在哪个类型的项目中使用 Radix Primitives?

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

由于一切都在 Next.js 上运行,这使我们能够在不同平台上保持品牌一致性,同时仍然赋予我们创建特定于平台的 UI 模式的自由。最初我设计并建立了该系统,但现在由我们团队的设计工程师维护和改进。


Radix Primitives 在哪些方面帮助了您和您的公司?

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

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


您对 Radix 开发者体验有何看法?

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


您对 Radix 文档有何看法?

文档很棒。这些示例使人们很容易理解事物是如何工作的。我还查看了 Modulz 设计系统,以了解您如何在您那边使用 Radix,并从中获得了很多灵感。

Steven Fabre

Liveblocks 联合创始人

关于

Liveblocks 是一组 API 和工具,可帮助您在几分钟内创建高性能且可靠的多人游戏体验。

liveblocks.io

创立于

巴黎,2021 年

下一个案例研究

Linear