# How to Limit Cursor to One UI Library

- Tool: Cursor
- Difficulty: Beginner
- Time required: 10 min
- Compatibility: Cursor Free/Pro, React, any UI library
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

```
# .cursorrules (add to existing file)

## UI Library: Material UI (MUI) v5
- ONLY use @mui/material components for all UI elements
- Import pattern: import { Button, TextField } from '@mui/material'
- Icons: import from '@mui/icons-material'
- Styling: use sx prop for component-level styles, useTheme() for theme values
- NEVER use: Tailwind classes, Chakra UI, Ant Design, raw HTML for UI elements
- NEVER use: styled-components, emotion css prop (use sx prop instead)
- FORBIDDEN imports: '@chakra-ui/*', 'antd', '@headlessui/*'
- For layouts: use MUI Grid2, Stack, Box — not CSS Grid or Flexbox directly
- Theme customization: src/theme.ts — always reference existing theme tokens
```

> Pro 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.

### 2. 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.

```
// Prompt to type in Cursor Composer (Cmd+I):
// @src/theme.ts @src/components/shared/AppButton.tsx
// Generate a new UserProfileCard component using MUI.
// Requirements:
// - Use the theme colors and spacing from theme.ts
// - Follow the same component structure as AppButton.tsx
// - Use Card, CardContent, Avatar, Typography from @mui/material
// - Include loading skeleton state
// - Use sx prop for all styling, reference theme tokens
```

> Pro 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.

### 3. 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.

```
---
description: UI component library enforcement
globs: "src/components/**, src/pages/**, **/*.tsx"
alwaysApply: false
---

- All UI elements MUST use @mui/material components
- Import components: import { Component } from '@mui/material'
- Import icons: import { IconName } from '@mui/icons-material'
- Use sx prop for styling, never className with CSS
- Reference @src/theme.ts for theme tokens
- Follow existing component patterns in src/components/shared/
- FORBIDDEN: Tailwind classes, inline CSS objects, CSS modules
- 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.

### 4. 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.

```
// In Cursor Settings → Features → Docs:
// Add: https://mui.com/material-ui/api/
// Label: MUI Component API
//
// Then use in prompts:
// @Docs MUI Component API
// Generate a DataGrid component that displays orders
// 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 code example

File: `.cursorrules`

```markdown
# UI Library Rules

## Primary Library: Material UI (MUI) v5
All user interface elements MUST use Material UI components.

### Required Imports
- Components: `import { Button, TextField, Card } from '@mui/material'`
- Icons: `import { Search, Delete, Edit } from '@mui/icons-material'`
- Hooks: `import { useTheme, useMediaQuery } from '@mui/material'`
- Lab: `import { LoadingButton } from '@mui/lab'`

### Styling Rules
- Use `sx` prop for all component-level styles
- Reference theme tokens: `sx={{ color: 'primary.main', p: 2 }}`
- Use responsive syntax: `sx={{ p: { xs: 1, sm: 2, md: 3 } }}`
- Custom theme: `src/theme.ts` — always use existing tokens
- NEVER use: className with CSS, styled-components, emotion css prop

### Layout Components
- Grid layout: `Grid2` (not legacy Grid)
- Flex layout: `Stack` with direction prop
- Container: `Box` with sx prop
- NEVER use raw div with CSS flexbox/grid

### FORBIDDEN Libraries
- `tailwindcss` / Tailwind CSS classes
- `@chakra-ui/*`
- `antd` / Ant Design
- `@headlessui/*`
- `@radix-ui/*` (unless through MUI)
- `styled-components` (use sx instead)

### Component Patterns
- Loading states: MUI Skeleton component
- Error states: MUI Alert component
- Forms: MUI TextField with FormControl
- Modals: MUI Dialog component
- Navigation: MUI AppBar + Drawer
```

## Common mistakes

- **Saying 'use MUI' without listing forbidden alternatives** — Cursor interprets 'use MUI' as a preference, not a requirement. It may still add Tailwind classes or raw HTML elements alongside MUI components. Fix: Explicitly list forbidden libraries and patterns: 'NEVER use Tailwind classes, @chakra-ui, antd, or raw div elements for layout.'
- **Not referencing existing components when generating new ones** — Without examples, Cursor generates generic library code that does not match your project's specific patterns, theme usage, or component structure. Fix: Always include 2-3 @file references to your best existing components when generating new ones.
- **Forgetting to enforce styling patterns along with component imports** — Cursor may import the right components but style them with CSS classes, inline styles, or styled-components instead of the sx prop. Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/cursor-tutorial/how-to-limit-cursor-ai-suggestions-to-a-single-ui-library-e-g-material-ui-in-react-projects
© RapidDev — https://www.rapidevelopers.com/cursor-tutorial/how-to-limit-cursor-ai-suggestions-to-a-single-ui-library-e-g-material-ui-in-react-projects