Vega Responsive UI

Responsive components for your interface 📦

Installation

Install @vega-ui/responsive-react with

npm:

  npm i @vega-ui/responsive-react

yarn:

  yarn add @vega-ui/responsive-react

Start

Connect the styles first. You can do this using a js file, however, we recommend that you connect using @import and defining layers so that there are no conflicts with specificity.

  @import url('@vega-ui/react/style.css') layer(library);
  @import url('@vega-ui/responsive-react/style.css') layer(library);

  @layer reset, library, components, overrides;

Setup fonts

Next:

    import { Montserrat } from 'next/font/google';

    const montserratSans = Montserrat({
      subsets: ['latin', 'cyrillic'],
      display: 'swap',
      weight: ['400', '500', '700', '900']
    });

Google Fonts:

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

Start using

  import { ResponsiveSelect, ResponsiveSelectOption } from '@vega-ui/responsive-react';

  ...

  <ResponsiveSelect>
    <ResponsiveSelectOption value='a'>A</ResponsiveSelectOption>
    <ResponsiveSelectOption value='b'>B</ResponsiveSelectOption>
  </ResponsiveSelect>

Running Tests

To run tests, run the following command

  npm run test

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.