VoTogether Design System

VoTogether-Design-System is a comprehensive library of common components that features our implementation of VoTogether.

Installation

Install the package in your project directory with:

npm i votogether-design-system

If you want to install devDependencies, try the script below.

npm i -D votogether-design-system

Getting Started

1. Wrap your own components(ex. App) with VDSProvider.

import { VDSProvider } from 'votogether-design-system';

<VDSProvider>
  <App />
</VDSProvider>;

2. Import components from package.

import { RoundButton } from 'votogether-design-system';
// import { RoundButton, SquareButton } from 'votogether-design-system';

export default function SomeComponent() {
  // ...
  return;
  <RoundButton>+</RoundButton>;
}

Usage Example

For example, Team VoTogether is currently using this package.

import { ResponsiveFlex } from 'votogether-design-system';

export default function SomeComponent() {
  // ...
  return (
    <div>
      <ResponsiveFlex
        breakpoint='678px'
        ratio={70}
        $smGap='20px'
        $lgGap='30px'
        $smPadding='60px 15px 0px 0px'
        $lgPadding='20px 80px 40px 60px'
      >
        <S.LeftSide>Left Side of Flex</S.LeftSide>
        <S.RightSide>Right Side of Flex</S.RightSide>
      </ResponsiveFlex>
    </div>
  );
}