votogether-design-system
v0.0.17
Published
<p align="center"><img src='https://github.com/VoTogether-Design-System/design-system/assets/81199414/7f260b72-5588-41aa-9200-a493e8aa89c3' width='110px' height='110px' ></p>
Downloads
54
Readme
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>
);
}
Links
Contributors
License
- Code and documentation copyright 2023 the VDS Contributors.
- Code released under the MIT License.