Sikt komponentbibliotek

A component library for Sikt designsystem.

Consume

Install package to be consumed:

npm i -s @sikt/sds-core @sikt/sds-<package-name>

Core & Design Tokens

Import the @sikt/sds-core package. It contains, among other things, a base stylesheet with reset, font family and Design Tokens, on which other packages are based.

@import url("@sikt/sds-core");

Note This package may be required whether you use the React components or not. Unless you import design tokens directly and make the setup yourself.

Note Design Tokens can be imported in the needed format directly from @sikt/sds-tokens.

React

Import component & stylesheet:

import { PrimaryButton } from "@sikt/sds-button";
import "@sikt/sds-button/dist/index.css";

return (
  <PrimaryButton>Hello, World!</PrimaryButton>;
);

Vue

See custom markup below or go to the Vue component example.

Stylesheets & custom markup

If you are not able to use the React components, for example if you are using Vue, Angular, Svelte or even PHP 😱. You can still benefit by using the stylesheets and building your own markup and components.

Import stylesheet:

@import url("@sikt/sds-button");

Create custom markup:

<button class="sds-button sds-button--primary">
  <span class="sds-button__label">Hello, World!</span>
</button>

Accessibility

Accessibility

Contribute

Contributing

License

License

Made with 💜 at Sikt