heroui-components

Import components from @heroui/react and use them directly in your JSX. For example, add <Button color="primary">Submit</Button> to your page component. HeroUI components are ready to use with Tailwind styling and accessibility built in.

Yes, HeroUI components support variant styling through props like color, size, and state. Customize appearance by passing props to components—e.g., <Input size="lg" /> or <Button variant="flat" />—without modifying Tailwind directly.

Use HeroUI's Input, Button, Modal, and Card components to construct forms and dialogs. Combine these components in React, apply variant props for styling, and handle state to manage form submission and modal visibility.

Yes, HeroUI components are fully typed for TypeScript. Import components from @heroui/react and use them with type safety. TypeScript examples and component type definitions are available through the MCP helper tools.

HeroUI provides Button, Input, Card, Modal, Table, and navigation components for standard patterns. Use the mcp__heroui-react__list_components and mcp__heroui-react__get_component_examples tools to discover all available components and their usage examples.

Styling inconsistency often results from missing Tailwind configuration or inconsistent variant props. Ensure Tailwind is configured in your project, use HeroUI's color and size props consistently, and debug with the component examples to verify expected output.