A Tailwind-based UI library for React.
- Built using Tailwind
- Full TypeScript support
- Configurable Theme
Pick one :)
bun i @kobandavis/ui
npm i @kobandavis/ui
yarn add @kobandavis/ui
pnpm add @kobandavis/ui
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.
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 */}</>
}