@adara-cs/ui-kit-web NPM

Adara UI

React component library, written by developers for developers 🩵

Installation

Install @adara-cs/ui-kit-web with

npm:

  npm i @adara-cs/ui-kit-web

yarn:

  yarn add @adara-cs/ui-kit-web

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('@/shared/styles/normalize.css') layer(reset);
  @import url('@adara-cs/ui-kit-web/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 { Button } from '@adara-cs/ui-kit-web';

  ...

  <Button>Hello, world!</Button>

Types

📌 Note: Correct typing with `as={Component<'tag'>}`

When passing a component to the as prop, and that component is itself a generic polymorphic component, such as:

function Link<T extends React.ElementType = 'a'>(props: { as?: T } & ...) { ... }

TypeScript cannot infer the concrete type T if you simply write:

<Wrapper as={Link} /> // ❌ Event types will be `any`

To retain full typing support (e.g. onClick(e) as MouseEvent<HTMLAnchorElement>), you must explicitly instantiate the generic:

<Wrapper as={Link<'a'>} /> // ✅ All event types, refs, and attributes are fully typed

This approach guarantees:

Automatic attribute inference (href, type, disabled, etc.)
Correct DOM event typing (onClick, onChange, onSubmit, etc.)
Full type safety without any
No wrappers, factories, or custom utilities needed

💡 It is recommended to use Component<'tag'> inside as when the component you are passing is itself generic and supports polymorphism.

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.

ui-kit ui ts typescript js

react react-dom @maskito/kit @maskito/core @maskito/phone @maskito/react @adara-cs/hooks @adara-cs/icons @adara-cs/utils libphonenumber-js @floating-ui/react react-remove-scroll

@adara-cs/responsive-ui

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

Adara UI

Installation

Start

Types

📌 Note: Correct typing with as={Component<'tag'>}

Running Tests

Contributing

📌 Note: Correct typing with `as={Component<'tag'>}`