Geist UI

Geist UI is a React component library inspired by the Vercel design system. It focuses on elegant text layout, optimized light and dark mode line weights, and scalable components. It is designed to help developers build clean personal sites or modern web applications using a highly customizable design system.

Note: This is a COMMUNITY PROJECT and is not officially associated with Vercel.

To switch between the default light and dark themes, ensure GeistProvider and CssBaseline are at the root of your application. You can then control the active theme by updating the themeType prop on the GeistProvider component.

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

const App = () => {
  const [themeType, setThemeType] = useState('light')
  const switchThemes = () => {
    setThemeType(last => (last === 'dark' ? 'light' : 'dark'))
  }
  return (
    <GeistProvider themeType={themeType}>
      <CssBaseline />
      <YourComponent onClick={switchThemes} />
    </GeistProvider>
  )
}

Instead of using size props, Geist components use a scale prop to dynamically adjust their volume. Providing a scale number (e.g., 0.5) results in a realistic reduction of all space occupancy, including fonts, ensuring layout and typography remain consistent with expectations.

Note: This feature requires Geist version v2.2.0 or higher.

<Button scale={0.5}>Scale 0.5</Button>
<Button>Default</Button>

To ensure Geist UI styles are included in the initial HTML payload when using Next.js, you must customize your _document.js file. Use the CssBaseline.flush() method to collect the styles generated during the current render cycle and inject them into the styles array within getInitialProps.

// NAME:pages/_document.js
import { Fragment } from "react"
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { CssBaseline } from '@geist-ui/core'

class MyDocument extends Document {
  static async getInitialProps (ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    const styles = CssBaseline.flush()

    return {
      ...initialProps,
      styles: [
        <Fragment key="1">
          {initialProps.styles}
          {styles}
        </Fragment>,
      ],
    }
  }

  render() { ... }
}

The User component is used to display user profile information, such as an avatar, name, and optional descriptions or social links. It can be used as a simple profile display or as a container for additional content like User.Link.

// Basic usage with avatar and name
<User src="/images/avatar.png" name="Witt" />

// Usage with a description
<User src="https://unix.bio/assets/avatar.png" name="Witt">
  JavaScript engineer
</User>

// Usage with a social link using User.Link
<User src="https://unix.bio/assets/avatar.png" name="Witt">
  <User.Link href="https://twitter.com/echo_witt">@echo_witt</User.Link>
</User>

The Fieldset component is used to display a collection of related information in a single unit. It supports sub-components for titles, subtitles, content areas, and footers to create structured information blocks.

<Fieldset>
  <Fieldset.Title>HTTP is simple</Fieldset.Title>
  <Fieldset.Subtitle>HTTP is generally designed to be simple and human readable...</Fieldset.Subtitle>
  <Fieldset.Footer>
      HTTP Knowledge Base
      <Button auto scale={1/3} font="12px">OK</Button>
    </Fieldset.Footer>
</Fieldset>

The Drawer is an interactive element fixed to the edge of the screen. It can be controlled via the visible prop and supports different screen placements. It includes sub-components for structured content: Drawer.Title, Drawer.Subtitle, and Drawer.Content.

import React from 'react'
import { Drawer, Button } from 'components'

const Example = () => {
  const [state, setState] = React.useState(false)
  return (
    <div>
      <Button auto onClick={() => setState(true)} scale={1/2}>Show Drawer</Button>
      <Drawer visible={state} onClose={() => setState(false)} placement="right">
        <Drawer.Title>Drawer</Drawer.Title>
        <Drawer.Subtitle>This is a drawer</Drawer.Subtitle>
        <Drawer.Content>
          <p>Some content contained within the drawer.</p>
        </Drawer.Content>
      </Drawer>
    </div>
  )
}

Use Avatar.Group to create a collection of overlapping/stacked avatars. You can use the count prop to display a total number of members if the group exceeds the displayed avatars.

import { Avatar } from 'components'

// Basic stacked group
<Avatar.Group>
  <Avatar src={url} stacked />
  <Avatar src={url} stacked />
  <Avatar src={url} stacked />
</Avatar.Group>

// Group with member count
<Avatar.Group count={12}>
  <Avatar src={url} stacked />
  <Avatar text="W" stacked />
  <Avatar text="Ana" stacked />
</Avatar.Group>