Ether UI

A set of Tailwind-styled React components for composing UIs.

Table of Contents

• Prerequisites
• Installation
• Usage
• Components
• Adding to PurgeCSS

Prerequisites

• Tailwind must be configured in your project (see Get Started).

Installation

# Using Yarn
yarn add ether-ui

# Using NPM
npm install ether-ui

Usage

Once it's installed (and Tailwind is set up!), you can start using the components right away:

import * as React from 'react';
import { Column, Grid, Heading, Text } from 'ether-ui';

const MyComponent: React.FC = () => (
  <Grid columns='12' gap='10'>
    <Column span='7'>
      <Grid gap='3'>
        <Heading level='1' size='5xl' weight='bold'>
          My Component
        </Heading>

        <Text size='lg' leading='loose'>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        </Text>
      </Grid>
    </Column>

    <Column span='5'>
      <Heading level='3' size='2xl'>
        Sidebar
      </Heading>
    </Column>
  </Grid>
);

export default MyComponent;

Now you've got it up and running, take a look at how the units are calculated.

Units

In the previous example, you might assume that the gap property on the <Grid /> element would space its children with 10px in between, but - because we use Tailwind's spacing - it'd actually be 40px!

Tailwind by default (see Customising Spacing) uses 4px increments for its spacing values (e.g. .m-1 and .m-3 apply 4px and 12px margin, respectively).

Components

• All Components
• Column
• Container
• Flex
• Grid
• Heading
• Image
• List
• ListItem
• Row
• Scroll
• Space
• Text

All Components

All components share the following properties:

| Property | Value | Default | | ----------- | -------------------------------------------------------------------------------- | ----------- | | className | React className string | undefined | | style | React style object | undefined |

Column

| Property | Value | Default | | -------- | ---------- | ----------- | | span | 1...12 | undefined | | start | 1...13 | undefined |

import { Column } from 'ether-ui';

<Column span='7' start='3'>
  ...
</Column>;

Container

No properties - a wrapper around the Tailwind .container class.

import { Container } from 'ether-ui';

<Container>...</Container>;

Flex

Grid

Heading

| Property | Value | Default | | ---------- | ----------------------------------------------------------------------------------------------------------------- | ----------- | | level | 123456 | 1 | | size | xssmbaselgxl2xl3xl4xl5xl6xl | base | | weight | hairlinethinlightnormalmediumsemiboldboldextraboldblack | undefined | | align | leftrightcenter | undefined | | leading | nonetightsnugnormalrelaxedloose | undefined | | tracking | tightertightnormalwidewiderwidest | undefined |

import { Heading } from 'ether-ui';

<Heading size='3xl' weight='bold' align='center' leading='snug' tracking='wide'>
  ...
</Heading>;

Image

List

| Property | Value | Default | | -------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | order | unorderedordered | unordered | | mode | discdecimalnone | none | | gap | 123456810121620243240485664 | undefined |

import { List } from 'ether-ui';

<List order='ordered' mode='decimal' gap='3'>
  ...
</List>;

ListItem

No properties - a wrapper around <li />.

import { ListItem } from 'ether-ui';

<ListItem>...</ListItem>;

Row

| Property | Value | Default | | -------- | --------- | ----------- | | span | 1...6 | undefined | | start | 1...7 | undefined |

import { Row } from 'ether-ui';

<Row span='3' start='1'>
  ...
</Row>;

Scroll

No properties - an element that fills its parent and enables overflow.

import { Scroll } from 'ether-ui';

<Scroll>...</Scroll>;

Space

Text

| Property | Value | Default | | ---------- | ----------------------------------------------------------------------------------------------------------------- | ----------- | | size | xssmbaselgxl2xl3xl4xl5xl6xl | base | | weight | hairlinethinlightnormalmediumsemiboldboldextraboldblack | undefined | | align | leftrightcenter | undefined | | leading | nonetightsnugnormalrelaxedloose | undefined | | tracking | tightertightnormalwidewiderwidest | undefined |

import { Text } from 'ether-ui';

<Text size='lg' weight='semibold' align='center' leading='snug' tracking='wide'>
  ...
</Text>;

Adding to PurgeCSS

In your tailwind.config.js file, add ./node_modules/ether-ui/**/*.tsx to your purge property, e.g:

module.exports = {
  purge: {
    content: [
      './components/**/*.tsx',
      './pages/**/*.tsx',
      './node_modules/ether-ui/**/*.tsx',
    ],
  },
  theme: {},
  variants: {},
  plugins: [],
};