Case study

Supabase

Radix Primitives 已迅速成为我们许多组件的基础。我们在这里看到的最大优势是,它极大地提高了我们使用它的所有应用的可访问性。

¥Radix Primitives have quickly become the foundation of many of our components. The biggest advantage we see here is vastly improved accessibility across anything we’ve used it for.

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

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

我们有一个名为 Supabase UI 的设计系统,它由“原子”级组件组成,这些组件可以一起使用来创建可重复的 UI 模式,这些模式在许多现代 Web 应用中都可以看到。Supabase UI 应用于我们所有的 Next.js 应用,它已成为一个有用的工具,可帮助我们在所有媒介中保持一致性。

¥We have a design system called Supabase UI which is comprised of ‘atom’ level components that can be used together to create repeatable UI patterns that you see in lots of modern web applications. Supabase UI is used across all of our Next.js applications, and it has become a useful tool to keep things consistent across all our mediums.

目前,只有少数开发者在内部为我们的 UI 库 做出贡献,此外还有一些开源贡献 ,但我们很快就会看到更多开发者同时参与其中。

¥Currently, we only have a few developers contributing internally to our UI library—plus a few open source contributions—but we will probably see more developers working on it simultaneously soon.


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

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

Radix Primitives 已迅速成为我们许多组件的基础。我们在这里看到的最大优势是,它极大地提高了我们使用它的所有应用的可访问性。与此相反的策略是从头构建组件;任何使用过此方法的人都非常了解一些较小的可访问性细节,例如按 Esc 键关闭对话框,或者混淆对话框和警报对话框。所有这些概念都由 Radix 基础组件处理,因此我们实际上只需完成更紧迫的任务,即以我们喜欢的方式设置组件的样式和组合。

¥Radix Primitives have quickly become the foundation of many of our components. The biggest advantage we see here is vastly improved accessibility across anything we’ve used it for. The opposing strategy to this is to build components from scratch; anyone who has done this will know all too well the smaller accessibility details such as hitting Esc to close a dialog box, or the confusion between, let’s say, a Dialog and an Alert Dialog. All of these concepts are handled by Radix primitives, so we are essentially just left with the more pressing job of styling and composing the components in the way that we like.


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

¥What are your thoughts on Radix developer experience?

将组件逐个引入到我们的 UI 库中非常棒。显然,我们无法一次性替换所有内容,但 Radix 通过为每个基础组件提供单独的 NPM 包简化了这一过程。任何想要构建 UI 系统的人都可以选择他们想要使用的内容,甚至可以将自己的自定义组件与 Radix Primitives 一起使用。你还可以根据需要组合组件。Supabase UI 中的一些组件更像 Ant Design 的工作原理,但使用 Radix Primitives,我们可以很容易地在自己的 UI 库中公开所需的部分,因此你永远不会局限于默认设置。

¥It’s been great introducing components one at a time into our UI library. Obviously we couldn’t just replace everything all at once, but Radix has made it easy by having a separate NPM package for each primitive. Anyone looking to build a UI system could even pick and choose what they wanted to use, and maybe even use their own custom components alongside Radix Primitives. There is also room to compose components however you want. Some of our components in Supabase UI are more reminiscent of how Ant Design works, but with Radix Primitives, it has been simple to expose the parts we needed in our own UI library, so you'll never be stuck with just a default setting.


你对 Radix 文档有何看法?

¥What are your thoughts on Radix docs?

文档非常棒,我们尤其喜欢这些示例!值得注意的是,你可以使用任何你喜欢的样式库来设置基元的样式。你永远不会被迫接受任何方式。

¥The docs are amazing, we especially love the examples! It’s worth noting that you can style the primitives using whatever styling library you like. You’re never stuck with being forced one way or another.

Jonathan Summers-Muir

Design + Code at Supabase

About

Supabase is a backend-as-a-service startup that automatically handles the behind-the-scenes work for developers.

supabase.com

Founded

Singapore, 2020

Next case study

Node.js
RadixUI v1.4 中文网 - 粤ICP备13048890号