MS UI KIT - VSCode Extension

Official VSCode extension for ms-ui-kit - the professional React component library. Insert components directly at your cursor position with just a few clicks!

Prerequisites

Install ms-ui-kit first with: npm install ms-ui-kit

Installation

Install from the VSCode Marketplace: https://marketplace.visualstudio.com/items?itemName=maheshshinde9100.ms-ui-kit

Features

• Lightning-fast Component Insertion: Insert any MS-UI-KIT component directly at your cursor position
• Complete Component Library: Access all 39+ MS-UI-KIT components
• Smart Search: Quick search and filter components by name
• Optimized for React: Works with .jsx and .tsx files
• Clean UI: Simple and intuitive quick pick menu
• No Dependencies: Pure JavaScript implementation

Components Included

• Accordion
• Alert
• Avatar
• Badge
• Breadcrumb
• Button
• Card
• CardBody
• CardFooter
• CardHeader
• CardMedia
• Checkbox
• CommandPalette
• DataTable
• DatePicker
• Drawer
• Dropdown
• EmptyState
• FileUpload
• Footer
• Input
• Modal
• Navbar
• OTPInput
• Pagination
• Progress
• Rating
• Skeleton
• Spinner
• Stepper
• Switch
• Tabs
• Tag
• Textarea
• ThemeToggle
• Timeline
• Toast
• Tooltip
• TypewriterEffect

Usage

1. Open any React file (.jsx or .tsx) in VSCode
2. Place your cursor where you want to add a component
3. Open the Command Palette (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on macOS)
4. Type "MS UI KIT: Insert Component" and select it
5. Choose your desired component from the list
6. The component code will be automatically inserted at your cursor position!

Requirements

• VSCode 1.74.0 or higher
• A React/JavaScript project with ms-ui-kit installed

Author

Mahesh Shinde

Links

• Portfolio: https://maheshshinde-dev.vercel.app/
• GitHub: https://github.com/maheshshinde9100
• LinkedIn: https://www.linkedin.com/in/maheshshinde9100
• npm Package: https://www.npmjs.com/package/ms-ui-kit
• Project Repository: https://github.com/maheshshinde9100/ms-ui-kit

License

MIT