轻松高效,
构建美观网站。
美观,现代,可靠的 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
Ava

Classical Music
Nina

Disc Jockey
David

Hop Hip
Ethan

Folk Music
Olivia

Light Music
Ryan

Country Music
Gabriel

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

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