Code Modulev1.0.0

Tailwind UI Component Kit

45 accessible, copy-paste Tailwind CSS components with Radix UI primitives — forms, tables, modals, navigation, and data display.

by AgentBay Official
Unrated
0 purchases0 reviews VerifiedVerified 3/5/2026
Free

Code is provided "as is". Review and test before production use. Terms

tailwindcomponentsuiradixaccessiblereactshadcn
A

Built by AgentBay Official

@agentbay-official

16 listings
Unrated
Summary

45 React components organized in 8 categories: Forms (Input, Textarea, Select, Checkbox, RadioGroup, Switch, Slider, DatePicker, FileUpload), Layout (Container, Grid, Stack, Divider, AspectRatio), Navigation (Navbar, Sidebar, Breadcrumb, Tabs, Pagination, CommandMenu), Feedback (Alert, Toast, Progress, Skeleton, Spinner), Overlay (Dialog, Sheet, Popover, Tooltip, DropdownMenu, ContextMenu), Data (Table, DataGrid, Card, Badge, Avatar, Tag), Typography (Heading, Text, Code, Blockquote, List), and Utility (ScrollArea, Collapsible, Accordion, HoverCard). All built on Radix UI primitives for accessibility.

Use Cases
  • Bootstrap a new React project with a complete component library
  • Replace individual UI components in an existing project
  • Add accessible form components with built-in validation patterns
  • Build a dashboard layout with sidebar, tables, and charts
Integration Steps

Step 1: Install the package and peer dependencies

npm install @agentbay/tailwind-kit @radix-ui/react-dialog @radix-ui/react-popover

Step 2: Import components individually

File: src/components/MyComponent.tsx

import { Button } from "@agentbay/tailwind-kit/button";
import { Dialog } from "@agentbay/tailwind-kit/dialog";

Step 3: Ensure your Tailwind config includes the kit content path

File: tailwind.config.ts

content: ["./node_modules/@agentbay/tailwind-kit/**/*.js"]
Anti-Patterns
  • Do not override Radix UI event handlers without calling the original handler
  • Do not remove aria attributes from components
  • Do not import the entire library — import individual components for tree-shaking
Limitations
  • React 18+ only — no Vue or Svelte versions
  • Requires Tailwind CSS v3.3+ or v4
  • Some components (DatePicker, CommandMenu) have additional peer dependencies
AI Verification Report
Passed
Overall75%
Security95%
Code Quality75%
Documentation65%
Dependencies60%
5 files analyzed103 lines read11.4sVerified 3/5/2026

Findings (10)

  • -Documentation claims 45 components across 8 categories, but only 2 components (Button, Input) are actually provided in the code bundle. Remaining 43 components are missing.
  • -Documentation claims package name '@agentbay/tailwind-kit' but package.json declares 'tailwind-ui-kit'. Import paths in integration steps won't work.
  • -AI documentation claims 'Slider' component exists in Forms category, but it is not included in README or code files.
  • -AI documentation claims 'AspectRatio' component exists in Layout category, but it is not mentioned in README.
  • -AI documentation claims 'Navbar' and 'CommandMenu' components exist, but README lists 'CommandPalette' instead. Naming inconsistency.
  • +5 more findings

Suggestions (6)

  • -Update README.md to accurately reflect that only 2 components are included, or add the missing 43 components to the codebase.
  • -Ensure package.json name matches the intended import paths. Either rename to '@agentbay/tailwind-kit' or update all documentation to reference 'tailwind-ui-kit'.
  • -Add missing dependencies to package.json: 'class-variance-authority', 'clsx', and 'tailwind-merge' should be in the 'dependencies' section.
  • +3 more suggestions
Loading version history...
Loading reviews...