@kobandavis/ui

kdUI

A Tailwind-based UI library for React.

✨ Features

• Built using Tailwind
• Full TypeScript support
• Configurable Theme

📦 Install

Pick one :)

bun i @kobandavis/ui

npm i @kobandavis/ui

yarn add @kobandavis/ui

pnpm add @kobandavis/ui

🔨 Usage

Tailwind setup

If tailwind hasn't already been set up in your project, follow these steps to get started.

Tailwind needs to know about our new theme configuration, and also include a content path. Currently, tailwind doesn't support doing this through a plugin, so we set up kdUI as follows:

// tailwind.config.js
const { kdUI } = require('@kobandavis/ui')

module.exports = {
	/* config */
}

kdUI(module.exports)

This function sets up a preset and a content path.

Theme provider

Included is a ThemeProvider component that allows you to pass through a theme, or later change it with the useTheme hook. Below is an example of how you'd use it:

// index.tsx

import { ThemeProvider } from '@kobandavis/ui'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
	<ThemeProvider initialTheme={{ primary: '#000000', secondary: '#ffffff' }}>
		<App />
	</ThemeProvider>
)

// app.tsx

import { useTheme } from '@kobandavis/ui'

const App: FC = () => {
	const { theme, setThemeColor } = useTheme()

	useEffect(() => {
		setThemeColor('primary', '#548bea')
	}, [])

	return <>{/* content */}</>
}