@kilnfi/design-system

Kiln design system

Kiln design system is a set of UI react components that can be reused on various frontends.

All components are available at style.kiln.fi.

How to use

You must use tailwindcss to build the css necessary. You should import the kiln design system theme and include the package in your content so tailwind builds the necessary classes:

const theme = require('@kilnfi/design-system/dist/theme')

module.exports = {
	content: [
		//
		"./node_modules/@kilnfi/design-system/**/*.{js,ts,jsx,tsx}"
	],
	theme: {
		//
		extend: {
			...theme,
		}
	},
	//
};

Please also import the fonts at the top of your css file:

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

If you don't use tailwind in your project, you can simply import the CSS directly:

import '@kilnfi/design-system/dist/esm/index.css'

You can then import components in your project like so:

import React from 'react';
import { Button } from '@kilnfi/design-system';


const App = () => {
	return (
		<>
			<Button>Button</Button>
		</>
	);
};


export default App;

Contribute

Install dependencies and run storybook locally:

npm i
npm run storybook

Run tests

npm run test

Compile and publish

Note: You must be logged on NPM (npm login) and be part of our @kilnfi organization in order to publish a new version.

1. Bump the package version in package.json
2. Build package: npm run rollup
3. Publish npm publish