bacali95/tw-react-components

Overview

This skill integrates the tw-react-components library into React projects to build TailwindCSS-driven dashboards and application UIs quickly. It exposes ready-made components (Button, Dialog, DataTable, Layout, etc.), hooks (useToast, usePagination, useOutsideClick, etc.), and utility helpers to speed up common UI patterns. Use it to standardize look-and-feel and reduce boilerplate for forms, tables, modals, and navigation.

How this skill works

Install the package and add its CSS and Tailwind plugin to your tailwind.config.js so components pick up utility classes. Import individual components, hooks, and helpers in TypeScript or JavaScript files and compose them in your pages. Components provide sensible defaults and props for customization (variants, colors, icons, loading states), while hooks handle behaviors like toasts, pagination, and outside-click detection.

When to use it

• Building admin dashboards, control panels, or internal tools where consistent UI components speed development
• Creating forms with validation using integrated FormInputs or standalone input components
• Rendering data grids with sorting, pagination, custom cell renderers, and row actions
• Implementing modal workflows (Dialog, ConfirmDialog, Sheet) and transient feedback (Toast)
• Prototyping UI quickly with Tailwind design tokens and prebuilt layout primitives

Best practices

• Include the tw-react-components tailwind plugin and @tailwindcss/forms in tailwind.config.js to ensure styles and form controls render correctly
• Import only the components you use to keep bundle size reasonable and prefer tree-shaking-friendly imports
• Wrap app root with Toaster when using useToast so toast calls work anywhere in the tree
• When using DataTable, supply controlled sorting and pagination props from state to keep table behavior predictable
• Use FormProvider with react-hook-form for complex forms; use standalone inputs for simple local state forms

Example use cases

• Dashboard layout with sidebar, top nav, and data tables for users, orders, or metrics
• CRUD forms using FormInputs with validation and a confirmation dialog for destructive actions
• Settings page using Tabs, Switches, SelectInput, and ThemeSelector for user preferences
• Side panel editor implemented with Sheet and useOutsideClick for quick edits
• Notification flows using useToast during save operations and file uploads