Limit Cursor to a single UI library by adding explicit component library rules to .cursorrules, referencing your design system files with @file context, and creating auto-attaching rules for component directories. Without these constraints, Cursor mixes Material UI, Tailwind, Chakra, and native HTML in the same project.
Why Cursor Mixes UI Libraries and How to Stop It
Cursor draws from training data covering every popular UI library, so it naturally mixes Material UI imports with Tailwind classes and native HTML elements in the same component. This creates inconsistent UIs and conflicting styles. This tutorial shows you how to lock Cursor to your chosen UI library so every generated component uses the correct import paths, component names, and styling patterns.
Prerequisites
- Cursor installed (Free or Pro)
- A React project with one UI library installed (MUI, Chakra, shadcn/ui, Ant Design, etc.)
- Basic understanding of component libraries in React
Step-by-step guide
Add UI library rules to .cursorrules
Add UI library rules to .cursorrules
Create explicit rules that name your chosen library and forbid alternatives. List specific import paths, component naming conventions, and styling patterns. The more explicit you are, the less Cursor will deviate.
1# .cursorrules (add to existing file)23## UI Library: Material UI (MUI) v54- ONLY use @mui/material components for all UI elements5- Import pattern: import { Button, TextField } from '@mui/material'6- Icons: import from '@mui/icons-material'7- Styling: use sx prop for component-level styles, useTheme() for theme values8- NEVER use: Tailwind classes, Chakra UI, Ant Design, raw HTML for UI elements9- NEVER use: styled-components, emotion css prop (use sx prop instead)10- FORBIDDEN imports: '@chakra-ui/*', 'antd', '@headlessui/*'11- For layouts: use MUI Grid2, Stack, Box — not CSS Grid or Flexbox directly12- Theme customization: src/theme.ts — always reference existing theme tokensPro tip: List the forbidden libraries explicitly. Saying 'only use MUI' is less effective than saying 'NEVER import from @chakra-ui, antd, or @headlessui'.
Expected result: Cursor generates all UI code using Material UI components exclusively.
Reference your theme and component files
Reference your theme and component files
When generating UI components, reference your theme configuration and existing components with @file. This gives Cursor your actual theme tokens, color palette, and component patterns to follow. Cursor will match your existing code style rather than generating generic MUI code.
1// Prompt to type in Cursor Composer (Cmd+I):2// @src/theme.ts @src/components/shared/AppButton.tsx3// Generate a new UserProfileCard component using MUI.4// Requirements:5// - Use the theme colors and spacing from theme.ts6// - Follow the same component structure as AppButton.tsx7// - Use Card, CardContent, Avatar, Typography from @mui/material8// - Include loading skeleton state9// - Use sx prop for all styling, reference theme tokensPro tip: Reference 2-3 of your best existing components as examples. Cursor will match their patterns more closely than following abstract rules.
Expected result: Cursor generates a component using your exact theme tokens and matching your existing component structure.
Create an auto-attaching rule for component files
Create an auto-attaching rule for component files
Create a .cursor/rules/ui-components.mdc that auto-attaches when Cursor encounters any component file. This ensures the UI library constraint is always active without needing to mention it in every prompt.
1---2description: UI component library enforcement3globs: "src/components/**, src/pages/**, **/*.tsx"4alwaysApply: false5---67- All UI elements MUST use @mui/material components8- Import components: import { Component } from '@mui/material'9- Import icons: import { IconName } from '@mui/icons-material'10- Use sx prop for styling, never className with CSS11- Reference @src/theme.ts for theme tokens12- Follow existing component patterns in src/components/shared/13- FORBIDDEN: Tailwind classes, inline CSS objects, CSS modules14- Use MUI responsive breakpoints: sx={{ p: { xs: 1, md: 2 } }}Expected result: UI library rules auto-attach for any .tsx file in components or pages directories.
Index your UI library documentation
Index your UI library documentation
Use Cursor's @Docs feature to index your UI library's documentation. Go to Cursor Settings, find the Docs section, and add the URL for your library's component API reference. Once indexed, you can reference it in prompts for accurate component API usage.
1// In Cursor Settings → Features → Docs:2// Add: https://mui.com/material-ui/api/3// Label: MUI Component API4//5// Then use in prompts:6// @Docs MUI Component API7// Generate a DataGrid component that displays orders8// with sorting, filtering, and pagination.Pro tip: Indexing your UI library's docs prevents Cursor from generating deprecated prop names or incorrect API usage. Especially useful for complex components like DataGrid or Autocomplete.
Expected result: Cursor uses accurate, up-to-date component APIs from the indexed documentation.
Complete working example
1# UI Library Rules23## Primary Library: Material UI (MUI) v54All user interface elements MUST use Material UI components.56### Required Imports7- Components: `import { Button, TextField, Card } from '@mui/material'`8- Icons: `import { Search, Delete, Edit } from '@mui/icons-material'`9- Hooks: `import { useTheme, useMediaQuery } from '@mui/material'`10- Lab: `import { LoadingButton } from '@mui/lab'`1112### Styling Rules13- Use `sx` prop for all component-level styles14- Reference theme tokens: `sx={{ color: 'primary.main', p: 2 }}`15- Use responsive syntax: `sx={{ p: { xs: 1, sm: 2, md: 3 } }}`16- Custom theme: `src/theme.ts` — always use existing tokens17- NEVER use: className with CSS, styled-components, emotion css prop1819### Layout Components20- Grid layout: `Grid2` (not legacy Grid)21- Flex layout: `Stack` with direction prop22- Container: `Box` with sx prop23- NEVER use raw div with CSS flexbox/grid2425### FORBIDDEN Libraries26- `tailwindcss` / Tailwind CSS classes27- `@chakra-ui/*`28- `antd` / Ant Design29- `@headlessui/*`30- `@radix-ui/*` (unless through MUI)31- `styled-components` (use sx instead)3233### Component Patterns34- Loading states: MUI Skeleton component35- Error states: MUI Alert component36- Forms: MUI TextField with FormControl37- Modals: MUI Dialog component38- Navigation: MUI AppBar + DrawerCommon mistakes when limiting Cursor to One UI Library
Why it's a problem: Saying 'use MUI' without listing forbidden alternatives
How to avoid: Explicitly list forbidden libraries and patterns: 'NEVER use Tailwind classes, @chakra-ui, antd, or raw div elements for layout.'
Why it's a problem: Not referencing existing components when generating new ones
How to avoid: Always include 2-3 @file references to your best existing components when generating new ones.
Why it's a problem: Forgetting to enforce styling patterns along with component imports
How to avoid: Add explicit styling rules alongside component rules: 'Use sx prop for all styling, never className or inline style objects.'
Best practices
- List both required and forbidden UI libraries explicitly in .cursorrules
- Reference your theme file and 2-3 example components in every UI generation prompt
- Create auto-attaching .cursor/rules/ for component directories with specific UI constraints
- Index your UI library's documentation using Cursor's @Docs feature for accurate API usage
- Include layout component preferences (Grid2 vs flexbox, Stack vs raw divs) in your rules
- Specify styling approach (sx prop, styled, CSS modules) alongside component library rules
- Update rules when upgrading UI library versions to prevent deprecated API usage
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
Generate a React component using ONLY Material UI v5 (@mui/material). Use the sx prop for all styling. Include: Card layout, Avatar, Typography for the header, and a list of items using List/ListItem. Follow MUI best practices for responsive design.
@src/theme.ts @src/components/shared/AppCard.tsx Generate a UserProfileCard component using ONLY @mui/material. Use sx prop for styling with theme tokens from theme.ts. Follow the same structure as AppCard.tsx. Include Avatar, Typography, Card, CardContent. No Tailwind, no CSS classes, no styled-components.
Frequently asked questions
Why does Cursor mix Material UI and Tailwind in the same component?
Cursor draws from training data covering all UI libraries. Without explicit rules forbidding alternatives, it combines whatever patterns seem appropriate. Add FORBIDDEN library imports to .cursorrules and Cursor will stop mixing.
Can I switch between UI libraries for different projects?
Yes. The .cursorrules file is per-project. Each project can have its own UI library rules. Cursor reads the local .cursorrules on every prompt, so switching projects automatically switches UI library constraints.
How do I make Cursor use the latest version of my UI library?
Index the latest documentation using Cursor's @Docs feature in Settings. Also specify the version in your rules: 'MUI v5' or 'Chakra UI v3'. Reference your actual package.json so Cursor knows the installed version.
Does this work for non-React UI libraries like Vue or Angular Material?
Yes. The same pattern applies to any framework. Replace the import paths and component names with your library's equivalents. The key principle is the same: list required imports, forbidden alternatives, and styling patterns.
What if I need to use components from multiple libraries?
If your project genuinely requires multiple libraries, define which library covers which domain in .cursorrules: 'Use MUI for forms and layout. Use Recharts for data visualization. Use react-table for tables.' Be explicit about boundaries.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation