Geist UI 是一个优雅美观，拥有浓厚 Geek 风格的 React 组件库。

借助 Geist 在文字排版、明暗表达、伸缩组件等诸多别具一格的优势，你可以轻易创建简洁有力的个人站点，或是基于高度可定制化设计系统快速构建现代化 Web 应用。

对于用户来说，使用 Geist 并不需要你有非常丰富的 React 开发经验，如果你只是希望搭建一个 Blog 系统、项目主页，通常能够在几分钟内完成。

为了轻易的和任何 React 项目接轨，也作为简易的示范，我们使用受到社区广泛应用的脚手架 create-react-app 创建通用项目。即便你的项目并非此脚手架创建，也能以此通用项目作为参考，非常简单的使用 Geist UI。

创建 React 项目

npx create-react-app my-app

npm install @geist-ui/core

至此为止我们已经准备好了基础项目。如果你是初学者，在这一步遇到困难，可以在 这里 留下你的问题。

引用组件库

在 src/index.js 中，我们添加基础的 Context 支持 GeistProvider 到根组件下，同时别忘了引入组件 CSSBaseline，它提供基础的样式重置与声明，类似于你熟知的 normalize.css 。

// ...
import { GeistProvider, CssBaseline } from '@geist-ui/core'

ReactDOM.render(
  <React.StrictMode>
    <GeistProvider>
      <CssBaseline /> // 基础样式组件
      <App />
    </GeistProvider>
  </React.StrictMode>,
  document.getElementById('root'),
)

你可以在 示例项目 中查看这次的代码变更，以确保完成了引入工作。

是的，@geist-ui/core 没有任何 .css 文件，我们把每个组件的样式分发给组件本身，你完全无需考虑样式的问题。这在你未来需要统一定制主题风格时非常有帮助，甚至能帮助你在服务端渲染时获的最佳效果。有关定制主题等高级内容，你可以参阅 如何定制主题的文档。

第一个页面

在最初使用组件库时，完全可以不必知晓组件的属性与用法。现在可以清理 src/app.js 的内容，添加一些 Geist UI 组件先试试：

// ...
import { Card, Code, Note, Spacer } from '@geist-ui/core'

function App() {
  return (
    <div className="app">
      <Card>
        hello, world. I am using <Code>@geist-ui/core</Code> !
      </Card>
      <Spacer h={1.5} />
      <Card shadow>
        <Note type="success">This note details something important.</Note>
      </Card>
    </div>
  )
}

我们添加了一些基础的组件，现在运行 npm start 就可以在页面中看到不错的效果。到此为止我们似乎做的不错，运用 Geist UI 构建了一个简单的页面。你可以在 示例项目 中查看这次的提交。

想要了解更多的组件？你可以看看 Geist - UI React 的 官方文档。

额外的支持

Geist 还默认提供了一套非常易于使用的黑暗模式，当你切换到黑暗模式时，所有的组件、文字、色彩都会自动的跟随变化，现在你所看到的博客页面就使用了它，点击下方的图标按钮可以预览效果。

当然，任何时候你都可以自定义所有的样式变量，这包括主题与单个组件。同时，在自定义这些基础变量时也无需担心过多的重复渲染 (re-render)，Geist 只会重新渲染那些你自定义过的色彩、间距或其他表现力参数，我们在样式的框架设计上充分利用了 React API 提供的 memoized 与 diff，在你的页面获得最佳表现力时也确保了性能与体验。

最后，Geist 完整且优先的提供 Server Render 支持，你所见的博客与我们的文档都是由服务端预渲染所完成，你可以在 这里了解如何配置。