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

1. 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}']
}

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

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

3. 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>

Development

TODO

Changelog

If you want to know the different changes between versions of this package, look at the changelog here.

I have an issue, what should I do?

Please file the issue here.

Contributing

See the contributing docs.

License

By contributing to kudu-components, you agree that your contributions will be licensed under the LICENSE of the project.