轻松高效,
构建美观网站。

美观,现代,可靠的 React 组件库。

开始使用
~ npm i @nex-ui/react

自定义主题

Nex UI 支持灵活的样式定制,以满足设计需求,您可以修改所有的 Tokens 或者创建全新的主题。

浅色 & 深色 UI

Nex UI 内置浅色与深色两套主题,并提供一种快速实现应用程序深色模式的便捷方案。

独特的 DX

Nex UI 提供一套样式设计系统,助力您更迅速、高效地打造自定义设计,拓展符合统一主题风格的自有组件。

TypeScript

Nex UI 完全基于 TypeScript 编写,对 TypeScript 提供一流的类型支持。

定制主题
随心所欲

Nex UI 基于 CSS 变量提供了 Tokens 与主题化的解决方案,您可以深度定制默认主题,或者打造完全属于自己的独特主题。

Tokens

Tokens 是一种与平台无关,用于管理应用程序中的设计决策。

SemanticToken

SemanticTokens 专为在特定上下文环境中使用而设计的 Tokens。

Scales

Scales 可将 Tokens、SemanticTokens 与 CSS 属性关联,使得 CSS 属性能够映射到相应的 Token 类型,进而允许 CSS 属性能够使用相应类型的 Tokens 作为值。

Components

可完全定制组件的全部样式和默认 Props。

Theme.ts
查看更多

设计样式
更为轻松

Nex UI 支持 sx 属性,这为您提供了一种便捷且高效的方式,能依据所使用的 CSS 属性,从主题中映射取值,进而将正确的 Token 应用到 React 元素上。同时,借助引用主题中预先定义的断点,使用 sx 属性还大幅简化了定义响应式值的过程。

Listen Now

Top picks for you. Updated daily.

Trip Hop

Trip Hop

Ava

Classical Music

Classical Music

Nina

Disc Jockey

Disc Jockey

David

Hop Hip

Hop Hip

Ethan

Folk Music

Folk Music

Olivia

Light Music

Light Music

Ryan

Country Music

Country Music

Gabriel

Pop Music

Pop Music

Benjamin

Playlist.tsx
查看更多

深色模式
开箱即用

Nex UI 不仅内置一套设计精美的深色主题,还为您提供一种快速实现应用程序深色模式的便捷方案。

Daily Mix
12 Tracks
Frontend Radio
1:34
4:45
app/layout.tsx
查看更多