@adara-cs/responsive-ui NPM

Adara Responsive UI

Responsive components for your interface 📦

Installation

Install @adara-cs/responsive-ui with

npm:

  npm i @adara-cs/responsive-ui

yarn:

  yarn add @adara-cs/responsive-ui

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('@adara-cs/ui-kit-web/style.css') layer(library);
  @import url('@adara-cs/responsive-ui/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 '@adara-cs/responsive-ui';

  ...

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