@kobandavis/ui
v1.1.1
Published
A Tailwind-based UI library for React.
Downloads
143
Readme
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 */}</>
}