react chakra ui
via PatrickJS/awesome-cursorrules
React development with Chakra UI component library and best practices.
What is react chakra ui?
This rule guides React development using Chakra UI, a component library for building accessible, responsive interfaces. Use it when building React applications that need consistent design systems, responsive layouts, and accessibility features out of the box.
- Enforce functional components with React hooks
- Establish folder structure for components, pages, theme, and utilities
- Configure Chakra UI theme customization and dark mode support
- Implement responsive design using Chakra UI's breakpoint system
- Apply accessibility best practices with Chakra UI components
- Use TypeScript for type safety with Chakra UI
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
// 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 = `
- Use TypeScript for type safety with Chakra UI components
- Implement proper component composition using Chakra UI
- Utilize Chakra UI's built-in accessibility features
- Use the 'as' prop for semantic HTML rendering
- Implement dark mode using Chakra UI's color mode
- Use Chakra UI's layout components for responsive design
- Follow Chakra UI best practices for performance optimization `;
Related rules
Structured workflow for creating React components with design review and code reuse checks.
Generate production-ready React forms from screenshots, PDFs, or text using FormEngine JSON schema with RSuite, Material UI, or Mantine.
Apollo Client integration patterns and best practices for React applications.
React development with MobX state management integration and best practices.
Best practices and structure for React Native Expo development.
React Native Expo Router with TypeScript and Windows development setup.