@sergiogc9/react-ui

React UI Components

This package exports the components included in my React UI library based on a design system using React, styled-components, styled-system and more.

See more info about the library HERE.

ℹ️ The library is still in a beta stage as I am still migrating many components here.

ℹ️ This library has been implemented by me and for me, hence it is highly opinionated.

Usage

Installation

Install the package from npm or github packages:

yarn add -S @sergiogc9/react-ui

Finally use any component from the UI library. These components must be used wrapped with the styled-components provider as shown above:

import { Box, Button, Flex, Grid, Text, Title } from '@sergiogc9/react-ui';

const Page = () => {
	return (
		<Flex flexDirection="column">
			<Box as="header">
				<Title aspectSize="xl">This page is awesome</Title>
			</Box>
			<Grid>
				<Grid.Box columns={4}>
					<Text>The UI Library rocks!</Text>
				</Grid.Box>
				<Grid.Box columns={8}>
					<Text>You should learn about styled-components and styled-system before :)</Text>
				</Grid.Box>
				<Grid.Row>
					<Button aspectSize="l" variant="primary">
						Click me!
					</Button>
				</Grid.Row>
			</Grid>
		</Flex>
	);
};

Documentation

This package basically exports all the components together with all their necessary types. For example, related to the Skeleton component, it exports the component itself and its related props types: SkeletonProps, SkeletonRectProps and SkeletonCircleProps.

In order to see the components docs, there is no public storybook available yet, but you can start it locally. All component are documented using the storybook.