Design System

An UI design language and style-components based React UI library.

storybook preview

📦 Install

$ npm install @flescompany/design-system

$ yarn install @flescompany/design-system

🔨 Usage

import { Button } from "@flescompany/design-system";

function App() {
  return (
    <Button
      backgroundColor="#c7babd"
      color="#ffffff"
      label="BUTTON"
      onClick={() => {}}
    />
  );
}

export default App;

components

import {
  Textarea,
  Select,
  Radio,
  RadioCustom,
  Input,
  Checkbox,
  CheckboxCustom,
  CarouselPagination,
  CarouselBtn,
  Button,
} from "@flescompany/design-system";

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

export default App;

import {
  Accordion,
  ArticleTitle,
  NumberFormatDigits,
  CardNumberFormatD,
  CardMid,
  CardTop,
  CardTopWithImg,
  CloseBtn,
  SearchBtn,
  InputSearch,
  InputWithBtn,
  InputWithSelect,
  Pagination,
  Post,
  Tab,
  Table,
  Tag,
} from "@flescompany/design-system";

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

export default App;

import {
  ButtonGroup,
  CarouselItem,
  CarouselItemInText,
  CarouselItemInTextImg,
  CarouselWrapper,
  CheckedValue,
  Dropdown,
  Footer,
  FooterItem,
  Header,
  InlineLink,
  InputWithLabel,
  ListThemeAccordion,
  ListThemeDate,
  ListThemeDateState,
  ListThemeHighlight,
  ListThemeArrow,
  ListThemeTag,
  ListThemeBtn,
  HeaderInPc,
  Modal,
  ModalWith,
  PostsWithPagination,
  SnsButtonGroup,
  UserCondition,
} from "@flescompany/design-system";

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

export default App;

import {
  BannerInText,
  BannerInTextAndImg,
  Card,
  CardNumber,
  CardWithImg,
  CardWithGrid,
  Carousel,
  CarouselInText,
  CarouselInTextImg,
  Empty,
  Grid,
  GridImg,
  Menu,
} from "@flescompany/design-system";

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

export default App;