ether-ui v1.13.1
Ether UI
A set of Tailwind-styled React components for composing UIs.
Table of Contents
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
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 | 1 2 3 4 5 6 | 1 |
size | xs sm base lg xl 2xl 3xl 4xl 5xl 6xl | base |
weight | hairline thin light normal medium semibold bold extrabold black | undefined |
align | left right center | undefined |
leading | none tight snug normal relaxed loose | undefined |
tracking | tighter tight normal wide wider widest | undefined |
import { Heading } from 'ether-ui';
<Heading size='3xl' weight='bold' align='center' leading='snug' tracking='wide'>
...
</Heading>;
Image
List
Property | Value | Default |
---|---|---|
order | unordered ordered | unordered |
mode | disc decimal none | none |
gap | 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 56 64 | 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 | xs sm base lg xl 2xl 3xl 4xl 5xl 6xl | base |
weight | hairline thin light normal medium semibold bold extrabold black | undefined |
align | left right center | undefined |
leading | none tight snug normal relaxed loose | undefined |
tracking | tighter tight normal wide wider widest | 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: [],
};
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago