Home › All rules › Community › React Chakra Ui Cursor Rules

React Chakra Ui Cursor Rules

Cursor rules for React development with Chakra UI integration.

CursorReactCommunity (CC0)

How to use

Save this as .cursor/rules/react-chakra-ui-cursorrules-prompt-file.mdc in your project, commit it, and Cursor will load it. Review it first: community files can be opinionated or out of date.

Note: Review and test before use. Provided as is, without warranty. See Terms.

---
description: "Cursor rules for React development with Chakra UI integration."
globs: **/*
alwaysApply: false
---
// React + Chakra UI .cursorrules

// Prefer functional components with hooks

const preferFunctionalComponents = true;

// Chakra UI best practices

const chakraUIBestPractices = [
  "Use ChakraProvider at the root of your app",
  "Utilize Chakra UI components for consistent design",
  "Implement custom theme for brand-specific styling",
  "Use responsive styles with the Chakra UI breakpoint system",
  "Leverage Chakra UI hooks for enhanced functionality",
];

// Folder structure

const folderStructure = `
src/
  components/
  pages/
  theme/
    index.js
    foundations/
    components/
  hooks/
  utils/
`;

// Additional instructions

const additionalInstructions = `
1. Use TypeScript for type safety with Chakra UI components
2. Implement proper component composition using Chakra UI
3. Utilize Chakra UI's built-in accessibility features
4. Use the 'as' prop for semantic HTML rendering
5. Implement dark mode using Chakra UI's color mode
6. Use Chakra UI's layout components for responsive design
7. Follow Chakra UI best practices for performance optimization
`;