BlockUI

Accessible, themeable React component library built on Headless UI and Tailwind CSS.

Installation

npm install @saheedibikunle/blockui

Setup

Import the stylesheet once in your app's entry file:

import '@saheedibikunle/blockui/styles'

Then import and use components:

import { Button, Input, Select, Switch } from '@saheedibikunle/blockui'

Toast setup

Toast requires wrapping your app (or a subtree) with ToastProvider:

import { ToastProvider } from '@saheedibikunle/blockui'

export default function App() {
  return (
    <ToastProvider position="bottom-right">
      {/* your app */}
    </ToastProvider>
  )
}

Then use the hook anywhere inside:

import { useToast } from '@saheedibikunle/blockui'

const { toast } = useToast()
toast({ title: 'Saved!', variant: 'success' })

Theming

Override any --blockui-* CSS variable in your own :root to retheme the library:

:root {
  --blockui-primary: oklch(55% 0.22 140);
  --blockui-primary-foreground: oklch(98% 0.005 140);
  --blockui-ring: oklch(55% 0.22 140);
}

Components

| Component | Import | |---|---| | Button | Button | | Input | Input | | Textarea | Textarea | | Select | Select | | Switch | Switch | | Badge | Badge | | Card | Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardSeparator | | Navbar | Navbar | | Toast | ToastProvider, useToast | | DatePicker | DatePicker | | TimePicker | TimePicker |

All components are fully typed. Run Storybook for interactive docs:

npm run dev

License

MIT © Saheed Ibikunle