@shifl_team/kontainer NPM

Shifl Kontainers Design System

Welcome to the Shifl Kontainers Design System! This repository houses the digital design guidelines and assets for Shifl, aimed at creating a cohesive and efficient user experience across all of our digital platforms. The Shifl Kontainers Design System is built to empower our team of designers, developers, and product managers to collaborate more effectively and to build high-quality, consistent products faster.

Introduction

The Shifl Kontainers Design System is the single source of truth for user interface standards for Shifl's digital products. It includes a comprehensive set of design guidelines, components, and tools that help teams build complex, scalable, and adaptable user interfaces.

Getting Started

To get started with Shifl Kontainers Design System, ensure you have the necessary development tools installed on your machine. A basic knowledge of HTML, CSS, and JavaScript is required to effectively utilize the design system.

Installation

To use the Shifl Kontainers Design System in your project, follow these steps:

npm install shifl-kontainers-design-system

yarn add shifl-kontainers-design-system

Usage

After installation, you can import and use the components in your project like so:

import { Button, TextField } from 'shifl-kontainers-design-system';

function App() {
  return (
    <div>
      <Button variant="primary">Click Me</Button>
      <TextField label="Name" placeholder="Enter your name" />
    </div>
  );
}

Components

The design system includes a wide range of components such as Buttons, Text Fields, Dropdowns, Modals, and many more. Each component is documented with example usage, properties, and customization options.

Design Tokens

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) to maintain a scalable and consistent visual system for UI development.

Contributing

We welcome contributions to the Shifl Kontainers Design System! If you're interested in contributing, please read our CONTRIBUTING.md document to learn more about making pull requests, reporting bugs, and suggesting enhancements.

Feedback

Feedback is crucial to the continuous improvement of the Shifl Kontainers Design System. If you have any suggestions or encounter issues, please open an issue in the repository.