### Install Medusa UI Package
Source: https://github.com/medusajs/ui/blob/develop/packages/ui/README.md
This command installs the Medusa UI package using yarn. Ensure you have Node.js and yarn installed. This is the primary step to begin using Medusa UI components in your project.
```sh
yarn add @medusajs/medusa-ui
```
--------------------------------
### Basic Medusa UI Button Usage
Source: https://github.com/medusajs/ui/blob/develop/packages/ui/README.md
This JSX code demonstrates how to import and use the Button component from Medusa UI. It requires React and the @medusajs/medusa-ui package to be installed. The example shows rendering a primary variant of the button.
```jsx
import { Button } from "@medusajs/ui"
const App = () =>
```
--------------------------------
### Install Medusa UI Packages (Bash)
Source: https://context7.com/medusajs/ui/llms.txt
Commands to install the core Medusa UI packages using either Yarn or npm. These packages include the main UI components, icon library, and the Tailwind CSS preset.
```bash
# Install all required packages
yarn add @medusajs/ui @medusajs/icons @medusajs/ui-preset
# Or with npm
npm install @medusajs/ui @medusajs/icons @medusajs/ui-preset
```
--------------------------------
### Application Setup with Medusa UI Toast Provider (TypeScript/React)
Source: https://context7.com/medusajs/ui/llms.txt
Demonstrates how to set up the Medusa UI application with necessary styles and the `Toaster` component. This ensures notifications are displayed correctly within the application layout.
```tsx
// app.tsx or main entry file
import "@medusajs/ui/styles.css"
import { Toaster } from "@medusajs/ui"
export function App() {
return (
)
}
```
--------------------------------
### Install Medusa Icons using Yarn
Source: https://github.com/medusajs/ui/blob/develop/packages/icons/README.md
This command installs the Medusa Icons package as a dependency for your project using the Yarn package manager.
```sh
yarn add @medusajs/icons
```
--------------------------------
### Button Component Examples (TypeScript/React)
Source: https://context7.com/medusajs/ui/llms.txt
Illustrates various use cases and variants of the Medusa UI Button component. Includes examples for primary, secondary, danger, transparent variants, loading states, disabled states, and icon integration.
```tsx
import { Button } from "@medusajs/ui"
import { ArrowRight, Plus } from "@medusajs/icons"
import { useState } from "react"
export function ButtonExamples() {
const [isLoading, setIsLoading] = useState(false)
const handleSave = async () => {
setIsLoading(true)
try {
await fetch('/api/save', { method: 'POST' })
} finally {
setIsLoading(false)
}
}
return (
{/* Primary button with loading state */}
{/* Secondary button with icon */}
{/* Danger button */}
{/* Transparent button with icon */}
{/* Disabled state */}
)
}
```
--------------------------------
### Configure Tailwind CSS with Medusa UI Preset (JavaScript)
Source: https://context7.com/medusajs/ui/llms.txt
Example configuration for Tailwind CSS to integrate with Medusa UI. It includes using the `@medusajs/ui-preset` and specifying content paths and the dark mode strategy.
```javascript
// tailwind.config.js
module.exports = {
presets: [require("@medusajs/ui-preset")],
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@medusajs/ui/dist/**/*.js"
],
darkMode: "class", // or 'media'
}
```
--------------------------------
### Create Advanced DropdownMenu with Medusa UI
Source: https://context7.com/medusajs/ui/llms.txt
Implement a sophisticated dropdown menu component using Medusa UI's DropdownMenu. This example showcases nested submenus, separators, and action items with icons. It requires importing necessary components from '@medusajs/ui' and icons from '@medusajs/icons'.
```tsx
import { DropdownMenu, Button, IconButton } from "@medusajs/ui"
import {
EllipsisHorizontal,
PencilSquare,
Trash,
DocumentDuplicate,
EyeSlash,
ArrowDownTray
} from "@medusajs/icons"
export function ActionMenu() {
const handleEdit = () => console.log("Edit action")
const handleDelete = () => console.log("Delete action")
const handleDuplicate = () => console.log("Duplicate action")
const handleExport = (format: string) => console.log(`Export as ${format}`)
return (
EditDuplicateExport handleExport('pdf')}>
Export as PDF
handleExport('csv')}>
Export as CSV
handleExport('json')}>
Export as JSON
HideDelete
)
}
```
--------------------------------
### Implement DatePicker with Calendar and Time Input using Medusa UI
Source: https://context7.com/medusajs/ui/llms.txt
Develop a versatile date selection component using Medusa UI's DatePicker. This example demonstrates single date selection, date selection with time input, and range selection, all featuring a calendar view. It requires importing components from '@medusajs/ui' and utilizes React's useState hook.
```tsx
import { DatePicker, Label, Button } from "@medusajs/ui"
import { useState } from "react"
export function EventScheduler() {
const [startDate, setStartDate] = useState()
const [endDate, setEndDate] = useState()
const [dateRange, setDateRange] = useState<{ from: Date | undefined; to?: Date }>(
{
from: undefined,
to: undefined
}
)
const handleSchedule = () => {
console.log("Event scheduled:", { startDate, endDate })
}
return (
{/* Single date picker */}
{/* Date picker with time */}
{/* Date range picker */}
)
}
```
--------------------------------
### Import Star Icon from Medusa Icons (React)
Source: https://github.com/medusajs/ui/blob/develop/packages/icons/README.md
This code snippet demonstrates how to import the 'Star' icon component from the '@medusajs/icons' package in a React application. It assumes you have already installed the package.
```jsx
import { Star } from "@medusajs/icons"
```
--------------------------------
### Displaying Medusa UI Icons in React Components
Source: https://context7.com/medusajs/ui/llms.txt
Demonstrates how to import and utilize various SVG icons from the @medusajs/icons package within React components. It shows icons integrated into buttons, icon buttons, and used with custom styling for size and color. Also includes examples of icons within badges and other UI elements.
```tsx
import {
Star,
StarSolid,
ShoppingCart,
User,
CheckCircleSolid,
XCircle,
ArrowRight,
Plus,
Trash,
PencilSquare
} from "@medusajs/icons"
import { Button, IconButton, Badge } from "@medusajs/ui"
export function IconShowcase() {
return (
{/* Icons in buttons */}
{/* Icon buttons */}
{/* Icons with custom colors and sizes */}
{/* Icons in custom components */}
3 items in cart
{/* Icons in badges */}
Verified
Failed
{/* User profile with avatar fallback */}
John Doe
)
}
```
--------------------------------
### Implement Toast Notifications with useToast Hook in React
Source: https://context7.com/medusajs/ui/llms.txt
This code snippet demonstrates how to use the `useToast` hook from Medusa UI to display various types of toast notifications. It covers success, error, warning, loading, and info variants, and shows how to include an action button with an 'Undo' functionality. The example requires `@medusajs/ui` and `@medusajs/icons`.
```tsx
import { useToast, Button } from "@medusajs/ui"
import { CheckCircleSolid, XCircle } from "@medusajs/icons"
export function NotificationExamples() {
const { toast } = useToast()
const showSuccessToast = () => {
toast({
title: "Success",
description: "Your changes have been saved successfully.",
variant: "success",
})
}
const showErrorToast = () => {
toast({
title: "Error",
description: "Failed to save changes. Please try again.",
variant: "error",
})
}
const showWarningToast = () => {
toast({
title: "Warning",
description: "This action cannot be undone.",
variant: "warning",
})
}
const showLoadingToast = () => {
const loadingToast = toast({
title: "Processing",
description: "Please wait while we process your request...",
variant: "loading",
})
// Simulate async operation
setTimeout(() => {
loadingToast.update({
title: "Complete",
description: "Your request has been processed.",
variant: "success",
})
}, 3000)
}
const showToastWithAction = () => {
toast({
title: "Item deleted",
description: "The item has been removed from your list.",
variant: "info",
action: {
label: "Undo",
altText: "Undo deletion",
onClick: () => {
console.log("Undo action triggered")
toast({
title: "Restored",
description: "Item has been restored.",
variant: "success",
})
}
}
})
}
return (
)
}
```
--------------------------------
### Create Product Modal with FocusModal (React)
Source: https://context7.com/medusajs/ui/llms.txt
This snippet demonstrates how to implement a full-screen modal using Medusa UI's FocusModal component in a React application. It includes form handling for product creation, state management for modal visibility and loading states, and API interaction for submitting product data. Dependencies include various Medusa UI components like Button, Input, Label, Textarea, and Select.
```tsx
import { FocusModal, Button, Input, Label, Textarea, Select } from "@medusajs/ui"
import { useState } from "react"
export function CreateProductModal() {
const [isOpen, setIsOpen] = useState(false)
const [formData, setFormData] = useState({
name: "",
description: "",
category: "",
price: ""
})
const [isLoading, setIsLoading] = useState(false)
const handleCreate = async () => {
setIsLoading(true)
try {
const response = await fetch('/api/products', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
})
if (response.ok) {
setIsOpen(false)
setFormData({ name: "", description: "", category: "", price: "" })
}
} catch (error) {
console.error("Failed to create product:", error)
} finally {
setIsLoading(false)
}
}
return (