hoondesign v0.6.8

Install

npm install hoondesign

Demo Site

https://hoondesign.netlify.app/

Box

Usage

import { Box } from 'hoonDesign';

function App() {
  <Box id="your-id">hello world!</Box>;
}

Box props

Text

Usage

import { Text } from 'hoondesign';

function App() {
  return <Text>Hello World!</Text>;
}

Text Props

Heading

Usage

import { Heading } from 'hoondesign';

function App() {
  return <Heading fontSize="xl">Hello World!</Heading>;
}

Heading Props

Flex

Usage

import { Box, Flex } from 'hoonDesign';

function App() {
  <Flex display="flex" justifyContent="center" alignItems="center">
    <Box id="your-id">hello world!</Box>
    <Box id="your-id2">hello world2!</Box>
    <Box id="your-id3">hello world3!</Box>
  </Flex>;
}

Flex Props

Button

Usage

import { Button } from 'hoondesign';

function App() {
  return <Button>submit</Button>;
}

Button Props

Popover

Usage

import { Popover } from 'hoondesign';

function App() {
  return <Popover>hello world!</Popover>;
}

Popover Props

Modal

Usage

import { Modal } from 'hoondesign';

function App() {
  return <Modal title="title">hello world!</Modal>;
}

Modal Props

RollingText

Usage

import { RollingText } from 'hoondesign'

function App(){
	return (
    	<RollingText numberValue = {123876}>
    )
}

RollingText Props

Skeleton

Usage

import { Box, Skeleton } from 'hoondesign';

function App() {
  return (
    <Box display="flex" justifyContent="center" width="600px">
      <Skeleton type="rect" />
      <Skeleton type="rect" />
    </Box>
  );
}

Skeleton Props