@turistikrota/ui kit was developed by Turistikrota Tech for use in shared websites.

This ui kit can only be used in React projects. Suitable for NextJS and Vite.

How to use

install the kit with your package manager:

yarn add @turistikrota/ui

Next, let's update the tailwind and postcss configuration:

// tailwind.config.js
const { withTouristicUI } = require('@turistikrota/ui/config')

module.exports = withTouristicUI({
  // your tailwind config
})

// postcss.config.js
module.exports = require('@turistikrota/ui/assets/postcss.config.cjs')

Use your tailwind configuration in your css file:

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

Finally, we need to load css to use our tailwind values. In your main js/ts file:

import '@turistikrota/ui/assets/config.css'

Or in your css file:

@import '@turistikrota/ui/assets/config.css';

Okey now we can use our components:

import Button from '@turistikrota/ui/button'

export default function Home() {
  return <Button>Click Me</Button>
}

Linter and Formatter

It provides configuration for the tourist route eslint and prettier.

Note: These configurations can be used independently of the ui kit.

Eslint

For eslint, you need to install the following packages:

yarn add -D eslint eslint-config-turistikrota

Then you need to create a .eslintrc.js file in the root directory of your project and add the following code:

module.exports = {
  extends: ['turistikrota'],
}

That's all, now you can use eslint.

Prettier

For prettier, you need to install the following packages:

yarn add -D prettier @turistikrota/prettier-config

Then you need to add the following code to the package.json file:

{
  "prettier": "@turistikrota/prettier-config"
}

Contribution

@turistikrota/ui is always open for direct contributions. Contributions can be in the form of design suggestions, documentation improvements, new component suggestions, code improvements, adding new features or fixing problems. For more information please check our Contribution Guideline document.