Geologic UI

Geologic UI is a component library inspired by 90's style web design on Geocities. It contains buttons, horizontal rules, an HTML5 compliant center tag, and an HTML5 compliant Blink tag. As a bonus, Geologic UI has a special construction tape component for when your site is getting renovated! It is compatible with Next.js and React. Geologic UI is open source and it's repo can be found on GitHub.

npm i geologic-ui

Note

Geologic UI only supports three digit hex colors like "#02a".

Importing Components

Simply import componets like this:

import { 
  Blink, 
  Button, 
  Center, 
  HR, 
  Icon, 
  UnderConstruction 
} from "geologic-ui";

Blink

The blink tag was introduced as a non-stantand HTML tag on Netscape Navigator. No major browsers support it today, but you can bring the functionality back with the Blink component!

This text blinks!

Usage

<Blink><p>This text blinks!</p></Blink>

Button

Usage

<Button label="Default Button" />
<br />
<Button size="sm" label="Small Button" />
<Button size="md" label="Medium Button" />
<Button size="lg" label="Large Button" />
<Button size="xl" label="XL Button" />
<br />
<Button color="#faa" label="Colored Button" />
<Button color="#5f0" label="Colored Button" />
<Button color="#444" labelColor="#fff" label="Custom Label Color" />

Center

The center tag was deprecated in HTML5, but the Center component brings this functionality back but with HTML5 compliance.

Usage

<Center>
  <Button
    color="#00f"
    labelColor="#ffa"
    label="I'm a Centered Button"
  />
</Center>

HR

Usage

<HR size="sm" color="#f00"/>
<HR size="md" color="#f80"/>
<HR size="lg" color="#ff0"/>
<HR size="xl" color="#8f0"/>

Icon

Chose from a collection of 27x27 pixel art icons. Copy and paste the name of the icon to use it.

alien

beaker

beer

burger

car

cat_and_dog

clock

construction_hat

dollar

earth

envelope

eyeball

fire

floppy_disk

folder

gaming_handheld

gear

heart

monitor

paper_clip

peace

plane

puzzle

recycle

rocket

serial_cable

smiley_with_sunglasses

smiley

snowflake

star

stop

telephone

trash_can

tree

trophy

warning

wrench

Icons can be scaled up too:

Usage


<Icon name="alien" size="sm" />
<Icon name="alien" size="md" />
<Icon name="alien" size="lg" />
<Icon name="alien" size="xl" />

UnderConstruction

This construction tape helps let your site visitors know that your site is only going to look bad temporarily.

Usage

<UnderConstruction size="sm" />
<UnderConstruction size="md" />
<UnderConstruction size="lg" />
<UnderConstruction size="xl" />