Kudu-components NPM

Kudu Components

Comprehensive collection of reusable UI components, used across all products developed by Kudu.

Install package

Note:
In order to the kudu-components package to work correctly, you need to have kudu-ui-system configured in your project beforehand. You can learn how to configure kudu-ui-components in your project by following this link.

After installing ppnpm, kudu-ui-system, you can install kudu-components with this command:

pnpm i kudu-components

To utilize components encompassed on the web3 path like ModalConnectWallet, you need to install wagmi and viempackages it into your project. Please refer to the documentation of wagmi/core for know more.

Usage

In your tailwind.config.js specify the content of kudu-components should be processed by Tailwind CSS during the build process

/** @type {import('tailwindcss').Config} */
export default {
	content: [...'./node_modules/kudu-components/**/*.{html,js,svelte,ts}']
}

Exclude the kudu-components package from the optimized dependencies in your vite.config.js.

export default defineConfig(() => ({
	...
	optimizeDeps: {
		exclude: ['kudu-components']
	},
	...
}))

Import and use any kudu-components

<script>
	import { LinkedIn } from 'kudu-components/icons'
</script>

<a
	href="https://www.linkedin.com/company/kudu-consultant-llc"
	class="btn btn-square btn-ghost child:w-7 child:h-7"
>
	<Linkedin />
</a>