Start

Components

Cards
Paragraphs
Avatars
Badges
Buttons
Code
Fieldsets
Inputs
Note
Table
Tag

Geist Style

Geist style is a modern Css library, you can fork it on GitHub.
Here is the new style version of Geist UI, we've removed a lot of sections that didn't perform well under plain style files. Of course if you are interested please see the following related projects:

Usage

1. Install:

npm i @geist-ui/style

2. Import to project:

import '@geist-ui/style'

3. In a simpler way, you can also use link of CDN: jsdelivr cdn

* Dark theme (optional)

* The dark theme need add class name dark-theme to html tag:

<html class="dark-theme">
...
</html>

Headings

H1 - H4 Headings, when we implement fonts and styles, we also optimize it in some detail.

The Evil Rabbit Jumped over the Fence

html code:

<h1>The Evil Rabbit Jumped over the Fence</h1>
<h2>The Evil Rabbit Jumped over the Fence</h2>
<h3>The Evil Rabbit Jumped over the Fence</h3>
<h4>The Evil Rabbit Jumped over the Fence</h4>

Lists

Unordered List and ordered List

Item
Item
Item

Item
Item
Item

html code:

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Cards

An open-source design system for building modern websites and applications.

A pin card

html code:

<div class="zi-card">
  <h4>An open-source design system for building modern websites and applications.</h4>
</div>
<div class="zi-card zi-dark">
  <h4>An open-source design system for building modern websites and applications.</h4>
</div>
<div class="zi-card pin">
  <h4>a dark card</h4>
</div>

Paragraphs

Default

Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bold

span html code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</b>

Helpful

comment text

html code:

<p class="zi-comment">comment text</p>

Avatars

Square avatars

Stacked Avatars

Text Avatars

USERL

html code:

<img class="zi-avatar small" src="...">
<img class="zi-avatar" src="...">
<img class="zi-avatar big" src="...">
<img class="zi-avatar huge" src="...">

<img class="zi-avatar square" src="...">

<img class="zi-avatar stacked" src="...">
<img class="zi-avatar stacked" src="...">

<!--include img element-->
<span class="zi-avatar"><img src="..."></span>

<!--include text-->
<span class="zi-avatar">
  <span class="zi-avatar-string">USER</span>
</span>
<span class="zi-avatar single">
  <span class="zi-avatar-string">L</span>
</span>

Badges

Basic badges

Default badges

550100

html code:

<span class="zi-badge">5</span>

Status

5505050

html code:

<span class="zi-badge">5</span>
<span class="zi-badge success">50</span>
<span class="zi-badge warning">50</span>
<span class="zi-badge error">50</span>

Buttons

Basic button

Default

Primary

html code:

<button class="zi-btn">Default</button>
<button class="zi-btn primary">Primary</button>

Button Type

Default button

ACTION

SUCCESS

WARNING

DANGER

Big button

ACTION

Small button

ACTION

Mini button

ACTION

html code:

<button class="zi-btn">ACTION</button>
<button class="zi-btn success">ACTION</button>
<button class="zi-btn warning">ACTION</button>
<button class="zi-btn danger">ACTION</button>

<button class="zi-btn big">ACTION</button>
<button class="zi-btn small">ACTION</button>
<button class="zi-btn mini">ACTION</button>

Status

Disabled button

Abort button

Shadown button

Loading button

html code:

<button class="zi-btn disabled">Disabled</button>
<button class="zi-btn abort">Abort</button>
<button class="zi-btn shadow">Shadow</button>
<button class="zi-btn success shadow">Shadow</button>
<button class="zi-btn success shadow small">Shadow</button>

<button class="zi-btn loading">
  <span class="zi-loading-shim">
    <i></i><i></i><i></i>
  </span>
</button>

Auto width

html code:

<button class="zi-btn auto">auto width</button>

Code

Inline code

TypeScript

Block code

const isNaN = val => Number.isNaN(val)

Bash code

npm i @geist-ui/style

Dark style

Output: 1, Status: ok

html code:

<code>TypeScript</code>
<pre>const isNaN = val => Number.isNaN(val)</pre>
<pre class="zi-bash">npm i @geist-ui/style</pre>
<pre class="zi-dark">Output: 1, Status: ok</pre>

Fieldsets

Normal

The Evil Rabbit Jumped over the Fence

html code:

<div class="zi-fieldset">
  <div class="zi-fieldset-content">
    <h1>The Evil Rabbit Jumped over the Fence</h1>
    <h2>The Evil Rabbit Jumped over the Fence</h2>
  </div>
  <div class="zi-fieldset-footer">
    <p>The Evil Rabbit Jumped over the Fence</p>
    <button clsss="zi-btn mini auto primary">Action</button>
  </div>
</div>

Inputs

Basic inputs

Normal

Disabled

Error

Success

html code:

<input class="zi-input" placeholder="The Evil Rabbit">
<input class="zi-input disabled" disabled placeholder="The Evil Rabbit">
<input class="zi-input error" value="The Evil Rabbit">
<input class="zi-input success" value="The Evil Rabbit">

Size

html code:

<input class="zi-input mini" value="The Evil Rabbit">
<input class="zi-input small" value="The Evil Rabbit">
<input class="zi-input" value="The Evil Rabbit">
<input class="zi-input big" value="The Evil Rabbit">

Input Group

include text

gesit-ui/react

html code:

<div class="zi-input-group prefix">
  <span class="zi-label prefix">geist-ui/react</span>
  <input class="zi-input" value="Geist">
</div>

Note

Default note

NOTE: This is a note that details something important.
A link to helpful information.

Hint note

Hint:This is a hint for something that is possible.

Alert note

Alert:This is an alert for something to take action for.

Error note

Error:This is a error for something very important.

Hidden label

a quick note!

html code:

<p class="zi-note"><span class="zi-note-type">NOTE:</span> This is a ...</p>
<p class="zi-note hint"><span class="zi-note-type">HINT:</span> This is a ...</p>
<p class="zi-note alert"><span class="zi-note-type">ALERT:</span> This is a ...</p>
<p class="zi-note error"><span class="zi-note-type">ERROR:</span> This is a ...</p>

<p class="zi-note">Just a quick note!</p>

Table

	NAME	USERNAME
	Evil Rabbit	evilrabbit
	Evil Rabbit	evilrabbit

html code:

<table class="zi-table">
  <thead>
    <tr>
      <th></th>
      <th>NAME</th>
      <th>USERNAME</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img class="zi-avatar" src="..."></td>
      <td>Evil Rabbit</td>
      <td>evilrabbit</td>
    </tr>
    <tr>
      <td><img class="zi-avatar" src="..."></td>
      <td>Evil Rabbit</td>
      <td>evilrabbit</td>
    </tr>
  </tbody>
</table>

Tag

Basic

Status: Unstable

html code:

<div class="zi-tag">Status: Unstable</div>
<span class="zi-tag">Status: Unstable</span>

Status

Status: Success

Status: Warning

Status: Danger

html code:

<span class="zi-tag success">Status: Success</span>
<span class="zi-tag warning">Status: Warning</span>
<span class="zi-tag danger">Status: Danger</span>