Creative Tokyo Kit

This is the main repository used as support for the talk:

Table of Contents

• About the Project
• Installation
• Usage
• Contributions
• Support

About the project

tkcreativekit is a react implementation of a simple design system starting from the design up to the package release.

• Video: SOON
• Slides: Link
• Figma: Link
• Storybook preview: Link
• npm package: Link
• Integration repo: Link

Installation

First, install component library and styled-components in your project directory:

# npm
$ npm install tkcreativekit styled-components
# yarn
$ yarn add tkcreativekit styled-components

Usage

Apply style reset and wrap your app with the ThemeProvider:

import React from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import { Button, styleReset, theme } from 'tkcreativekit';

const GlobalStyle = createGlobalStyle`
    ${styleReset}
`;

function App() {
    return (
        <div>
            <GlobalStyle />
            <ThemeProvider theme={theme}>
                <Button>Sign up</Button>
            </ThemeProvider>
        </div>
    );
}

export default App;

Contributions

If you are interested to contribute for the application, do not hesitate.

Any contribution is welcome.

Support

If you are willing to contact me, you can either create an issue here or find me on Twitter (@florianldt).