Medusa UI

https://docs.medusajs.com/ui
Admin
Medusa UI is a React implementation of the Medusa design system providing components, hooks,...
Tokens:31,118
Snippets:365
Trust Score:9.8
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install @medusajs/icons

Source: https://docs.medusajs.com/ui/icons/overview

Installs the Medusa UI icons package in a standalone React project. Requires React 16.8+.

```bash
npm install @medusajs/icons
```

--------------------------------

### UI route example using Medusa UI and icons

Source: https://docs.medusajs.com/ui/installation/medusa-admin-extension

Example of a UI route file that imports and uses Medusa UI components (Container, Heading) and an icon (ChatBubbleLeftRight) from @medusajs/icons. The route defines a custom page and its sidebar configuration.

```tsx
import { defineRouteConfig } from "@medusajs/admin-sdk"
import { ChatBubbleLeftRight } from "@medusajs/icons"
import { Container, Heading } from "@medusajs/ui"

const CustomPage = () => {
  return (
    <Container className="divide-y p-0">
      <div className="flex items-center justify-between px-6 py-4">
        <Heading level="h2">This is my custom route</Heading>
      </div>
    </Container>
  )
}

export const config = defineRouteConfig({
  label: "Custom Route",
  icon: ChatBubbleLeftRight,
})

export default CustomPage
```

--------------------------------

### Install Medusa UI package

Source: https://docs.medusajs.com/ui/installation/standalone-project

Install the @medusajs/ui package in your standalone project. Requires React v18.3.1 or later and Tailwind CSS.

```bash
npm install @medusajs/ui
```

--------------------------------

### Install Medusa UI preset

Source: https://docs.medusajs.com/ui/installation/standalone-project

Install the @medusajs/ui-preset package as a dev dependency. This preset customizes Tailwind CSS classes to implement Medusa UI's design system.

```bash
npm install @medusajs/ui-preset --save-dev
```

--------------------------------

### Basic DropdownMenu Usage

Source: https://docs.medusajs.com/ui/components/dropdown-menu

A basic example of the DropdownMenu component with a trigger and content containing menu items.

```tsx
<DropdownMenu>
  <DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Edit</DropdownMenu.Item>
    <DropdownMenu.Item>Add</DropdownMenu.Item>
    <DropdownMenu.Item>Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>
```

--------------------------------

### CommandBar usage example

Source: https://docs.medusajs.com/ui/components/command-bar

Renders a command bar with a value showing the selected count, a separator, and a delete command with a shortcut. The open prop controls visibility, and the action prop is invoked when the command is triggered.

```tsx
<CommandBar open={open}>
  <CommandBar.Bar>
    <CommandBar.Value>{count} selected</CommandBar.Value>
    <CommandBar.Seperator />
    <CommandBar.Command
      action={onDelete}
      label="Delete"
      shortcut="d"
    />
  </CommandBar.Bar>
</CommandBar>
```

--------------------------------

### Import and use useToggleState

Source: https://docs.medusajs.com/ui/hooks/use-toggle-state

Import the hook and call it to get the current state and functions to open, close, or toggle the state.

```tsx
import { useToggleState } from "@medusajs/ui"
```

```tsx
const [state, open, close, toggle] = useToggleState()
```

--------------------------------

### Display a toast message with toast.info

Source: https://docs.medusajs.com/ui/components/toast

Use the toast utility to display a toast message when a button is clicked. The example shows the info variant with a title and description.

```tsx
export default function MyComponent() {
  return (
    <Button 
      onClick={() => 
        toast.info("Toast title", {
          description: "Toast body",
        })
      }
    >
      Trigger
    </Button>
  )
}
```

--------------------------------

### Use usePrompt to confirm an action

Source: https://docs.medusajs.com/ui/hooks/use-prompt

Call the dialog function returned by usePrompt with title and description to get a boolean confirmation.

```tsx
const dialog = usePrompt()
const actionFunction = async () => {
  const confirmed = await dialog({
    title: "Are you sure?",
    description: "Please confirm this action",
  })
}
```

--------------------------------

### Implement pagination logic with array data

Source: https://docs.medusajs.com/ui/components/data-table

Example of paginating an array of products using the pagination state. It slices the data based on pageIndex and pageSize, and passes the pagination state to useDataTable.

```tsx
const [pagination, setPagination] = useState<DataTablePaginationState>({
  pageSize: PAGE_SIZE,
  pageIndex: 0,
})

const shownProducts = useMemo(() => {
  return products.slice(
    pagination.pageIndex * pagination.pageSize,
    (pagination.pageIndex + 1) * pagination.pageSize
  )
}, [pagination])

const table = useDataTable({
  data: shownProducts,
  columns,
  rowCount: products.length,
  getRowId: (product) => product.id,
  pagination: {
    // Pass the pagination state and updater to the table instance
    state: pagination,
    onPaginationChange: setPagination,
  },
  isLoading: false,
})
```

--------------------------------

### Avatar Usage Example

Source: https://docs.medusajs.com/ui/components/avatar

Render an Avatar with a source image and a fallback text.

```tsx
<Avatar
  src="https://avatars.githubusercontent.com/u/10656202?v=4"
  fallback="M"
/>
```

--------------------------------

### Implement sorting logic for a simple array

Source: https://docs.medusajs.com/ui/components/data-table

When using a simple array, sort the data based on the sorting conditions. The sorting state object has id (column key) and desc (boolean for descending order). This example uses useMemo to sort the products array.

```tsx
const [sorting, setSorting] = useState<DataTableSortingState | null>(null)

const shownProducts = useMemo(() => {
  if (!sorting) {
    return products
  }
  return products.slice().sort((a, b) => {
    // @ts-ignore
    const aVal = a[sorting.id]
    // @ts-ignore
    const bVal = b[sorting.id]
    if (aVal < bVal) {
      return sorting.desc ? 1 : -1
    }
    if (aVal > bVal) {
      return sorting.desc ? -1 : 1
    }
    return 0
  })
}, [sorting])

const table = useDataTable({
  data: shownProducts,
  columns,
  getRowId: (product) => product.id,
  rowCount: products.length,
  sorting: {
    // Pass the pagination state and updater to the table instance
    state: sorting,
    onSortingChange: setSorting,
  },
  isLoading: false,
})
```

--------------------------------

### Import Prompt

Source: https://docs.medusajs.com/ui/components/prompt

Import the Prompt component from the Medusa UI package.

```tsx
import { Prompt } from "@medusajs/ui"
```

--------------------------------

### clx Usage Example with Box Component

Source: https://docs.medusajs.com/ui/utils/clx

Example of using `clx` in a React component to apply base styles, conditional margin-top classes based on the `mt` prop, and additional class names passed as props. Demonstrates merging Tailwind CSS classes without conflicts.

```tsx
import { clx } from "@medusajs/ui"

type BoxProps = {
  className?: string
  children: React.ReactNode
  mt: "sm" | "md" | "lg"
}

const Box = ({ className, children, mt }: BoxProps) => {
  return (
    <div
      className={clx(
        "flex items-center justify-center",
        {
          "mt-4": mt === "sm",
          "mt-8": mt === "md",
          "mt-12": mt === "lg",
        },
        className
      )}
    >
      {children}
    </div>
  )
}
```

--------------------------------

### Import usePrompt

Source: https://docs.medusajs.com/ui/hooks/use-prompt

Import the usePrompt hook from the @medusajs/ui package.

```tsx
import { usePrompt } from "@medusajs/ui"
```

--------------------------------

### Render Kbd component

Source: https://docs.medusajs.com/ui/components/kbd

Render a keyboard shortcut using the Kbd component.

```tsx
<Kbd>Ctrl + Shift + A</Kbd>
```

--------------------------------

### Copy with TooltipProvider

Source: https://docs.medusajs.com/ui/components/copy

When using Copy outside Medusa Admin, wrap it with TooltipProvider to ensure tooltips work.

```tsx
<TooltipProvider>
  <Copy content="yarn add @medusajs/ui" />
</TooltipProvider>
```

--------------------------------

### Update Medusa UI packages in package.json

Source: https://docs.medusajs.com/ui/installation/standalone-project

Update the versions of @medusajs/ui and @medusajs/ui-preset in your package.json file and re-install dependencies to get the latest updates.

```json
{
  "dependencies": {
    "@medusajs/ui": "4.0.0",
    "@medusajs/ui-preset": "4.0.0"
  }
}
```

--------------------------------

### Import ProgressAccordion

Source: https://docs.medusajs.com/ui/components/progress-accordion

Import the ProgressAccordion component from the Medusa UI package.

```tsx
import { ProgressAccordion } from "@medusajs/ui"
```

--------------------------------

### Add Toaster component to layout

Source: https://docs.medusajs.com/ui/components/toast

Place the Toaster component in your application's tree hierarchy, for example in the main layout, to enable toast messages.

```tsx
export default function AppLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}
```

--------------------------------

### clx with Array Argument

Source: https://docs.medusajs.com/ui/utils/clx

Shows how to pass an array of strings and objects to `clx`.

```tsx
clx([
  "flex items-center justify-between",
  {
    "hidden": isHidden,
  },
])
```

--------------------------------

### Implement custom filtering logic

Source: https://docs.medusajs.com/ui/components/data-table

This example shows how to filter a simple array based on the filtering state. It handles string, array, and date object conditions, and passes the filtered data to useDataTable.

```tsx
const [filtering, setFiltering] = useState<DataTableFilteringState>({})

const shownProducts = useMemo(() => {
  return products.filter((product) => {
    return Object.entries(filtering).every(([key, value]) => {
      if (!value) {
        return true
      }
      if (typeof value === "string") {
        // @ts-ignore
        return product[key].toString().toLowerCase().includes(value.toString().toLowerCase())
      }
      if (Array.isArray(value)) {
        // @ts-ignore
        return value.includes(product[key].toLowerCase())
      }
      if (typeof value === "object") {
        // @ts-ignore
        const date = new Date(product[key])
        let matching = false
        if ("$gte" in value && value.$gte) {
          matching = date >= new Date(value.$gte as number)
        }
        if ("$lte" in value && value.$lte) {
          matching = date <= new Date(value.$lte as number)
        }
        if ("$lt" in value && value.$lt) {
          matching = date < new Date(value.$lt as number)
        }
        if ("$gt" in value && value.$gt) {
          matching = date > new Date(value.$gt as number)
        }
        return matching
      }
    })
  })
}, [filtering])

const table = useDataTable({
  data: shownProducts,
  columns,
  getRowId: (product) => product.id,
  rowCount: products.length,
  isLoading: false,
  filtering: {
    state: filtering,
    onFilteringChange: setFiltering,
  },
  filters,
})
```

--------------------------------

### Basic Command usage

Source: https://docs.medusajs.com/ui/components/command

Renders a code block with the command text.

```tsx
<Command>
  <code>yarn add @medusajs/ui</code>
</Command>
```

--------------------------------

### Set body background color with Medusa UI color class

Source: https://docs.medusajs.com/ui/colors/overview

Apply the 'bg-medusa-bg-base' Tailwind CSS class to set the background color of the document's body. This class is available in Medusa Admin customizations or standalone projects with the @medusajs/ui package installed.

```tsx
<body className="bg-medusa-bg-base">
  ...
</body>
```

--------------------------------

### Prompt Usage

Source: https://docs.medusajs.com/ui/components/prompt

Basic usage of the Prompt component with trigger, content, header, title, description, footer, cancel, and action elements.

```tsx
<Prompt>
  <Prompt.Trigger>Trigger</Prompt.Trigger>
  <Prompt.Content>
    <Prompt.Header>
      <Prompt.Title>Title</Prompt.Title>
      <Prompt.Description>Description</Prompt.Description>
    </Prompt.Header>
    <Prompt.Footer>
      <Prompt.Cancel>Cancel</Prompt.Cancel>
      <Prompt.Action>Delete</Prompt.Action>
    </Prompt.Footer>
  </Prompt.Content>
</Prompt>
```

--------------------------------

### Import Toaster and toast from @medusajs/ui

Source: https://docs.medusajs.com/ui/components/toast

Import the Toaster component and toast utility from the @medusajs/ui package.

```tsx
import { Toaster, toast } from "@medusajs/ui"
```

--------------------------------

### Import OtpInput from @medusajs/ui

Source: https://docs.medusajs.com/ui/components/otp-input

Import the OtpInput component from the Medusa UI package.

```tsx
import { OtpInput } from "@medusajs/ui"
```

--------------------------------

### Filter products by date conditions from filtering state

Source: https://docs.medusajs.com/ui/components/data-table

Filters an array of products based on the `filtering` state object. It checks each filter condition for date keys using $gte, $lte, $lt, and $gt operators. The example assumes a simple array and uses useMemo.

```tsx
const shownProducts = useMemo(() => {
  return products.filter((product) => {
    return Object.entries(filtering).every(([key, value]) => {
      if (!value) {
        return true
      }
      // other types checks...
      if (typeof value === "object") {
        // @ts-ignore
        const date = new Date(product[key])
        let matching = false
        if ("$gte" in value && value.$gte) {
          matching = date >= new Date(value.$gte as number)
        }
        if ("$lte" in value && value.$lte) {
          matching = date <= new Date(value.$lte as number)
        }
        if ("$lt" in value && value.$lt) {
          matching = date < new Date(value.$lt as number)
        }
        if ("$gt" in value && value.$gt) {
          matching = date > new Date(value.$gt as number)
        }
        return matching
      }
    })
  })
}, [filtering])
```

--------------------------------

### Import IconBadge and BuildingTax

Source: https://docs.medusajs.com/ui/components/icon-badge

Import the IconBadge component from @medusajs/ui and the BuildingTax icon from @medusajs/icons.

```tsx
import { IconBadge } from "@medusajs/ui"
import { BuildingTax } from "@medusajs/icons"
```

--------------------------------

### Import InlineTip

Source: https://docs.medusajs.com/ui/components/inline-tip

Import the InlineTip component from the @medusajs/ui package.

```tsx
import { InlineTip } from "@medusajs/ui"
```

--------------------------------

### Select with empty value handling

Source: https://docs.medusajs.com/ui/components/select

Shows how to handle a 'None' option by using a non-empty placeholder value and converting it in the change handler. Avoids the error 'A <Select.Item /> must have a value prop that is not an empty string'.

```tsx
<Select
  onValueChange={(value) =>
    handleChange(value === "none" ? null : value)
  }
>
  <Select.Trigger>
    <Select.Value placeholder="Placeholder" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="none">None</Select.Item>
    {items.map((item) => (
      <Select.Item key={item.value} value={item.value}>
        {item.label}
      </Select.Item>
    ))}
  </Select.Content>
</Select>
```

--------------------------------

### Import Tooltip

Source: https://docs.medusajs.com/ui/components/tooltip

Import the Tooltip component from the @medusajs/ui package.

```tsx
import { Tooltip } from "@medusajs/ui"
```

--------------------------------

### clx with String Argument

Source: https://docs.medusajs.com/ui/utils/clx

Shows how to pass a string of class names to `clx`.

```tsx
clx("flex items-center justify-between")
```

--------------------------------

### usePrompt

Source: https://docs.medusajs.com/ui/hooks/use-prompt

The usePrompt hook returns a function that prompts the user to confirm an action. The returned dialog function accepts an object with title and description properties and returns a Promise resolving to a boolean indicating user confirmation.

```APIDOC
## usePrompt

### Description
The `usePrompt` hook returns a function that prompts the user to confirm an action. The returned dialog function accepts an object with properties and returns a Promise that resolves to a boolean indicating whether the user confirmed the action.

### Usage
```tsx
import { usePrompt } from "@medusajs/ui"

const dialog = usePrompt()
const actionFunction = async () => {
  const confirmed = await dialog({
    title: "Are you sure?",
    description: "Please confirm this action",
  })
}
```

### Return Value
The hook returns a dialog function.

### Dialog Parameters
The dialog function accepts an object with the following properties:
- `title` (string) - The title of the prompt.
- `description` (string) - The description of the prompt.

### Dialog Return Value
The dialog function returns a Promise that resolves to a boolean indicating whether the user confirmed the action.

### Examples
#### Prompt with Verification Text
See the component example for a prompt with verification text.
```

--------------------------------

### Import Kbd component

Source: https://docs.medusajs.com/ui/components/kbd

Import the Kbd component from the @medusajs/ui package.

```tsx
import { Kbd } from "@medusajs/ui"
```

--------------------------------

### Import FocusModal

Source: https://docs.medusajs.com/ui/components/focus-modal

Import the FocusModal component from the @medusajs/ui package.

```tsx
import { FocusModal } from "@medusajs/ui"
```

--------------------------------

### Import Command component

Source: https://docs.medusajs.com/ui/components/command

Import the Command component from @medusajs/ui.

```tsx
import { Command } from "@medusajs/ui"
```

--------------------------------

### Import CommandBar

Source: https://docs.medusajs.com/ui/components/command-bar

Import the CommandBar component from the @medusajs/ui package.

```tsx
import { CommandBar } from "@medusajs/ui"
```

--------------------------------

### Import CurrencyInput

Source: https://docs.medusajs.com/ui/components/currency-input

Import the CurrencyInput component from the @medusajs/ui package.

```tsx
import { CurrencyInput } from "@medusajs/ui"
```

--------------------------------

### Import DropdownMenu

Source: https://docs.medusajs.com/ui/components/dropdown-menu

Import the DropdownMenu component from the @medusajs/ui package.

```tsx
import { DropdownMenu } from "@medusajs/ui"
```

--------------------------------

### CodeBlock with TooltipProvider

Source: https://docs.medusajs.com/ui/components/code-block

When using CodeBlock outside Medusa Admin, wrap it with TooltipProvider because CodeBlock.Header uses a Tooltip.

```tsx
<TooltipProvider>
  <CodeBlock 
    snippets={[
      { 
        language: "tsx", 
        label: "Label", 
        code: "import { useProduct } from \"medusa-react\"",
      },
    ]}
  >
    <CodeBlock.Header />
    <CodeBlock.Body />
  </CodeBlock>
</TooltipProvider>
```

--------------------------------

### Basic Copy Usage

Source: https://docs.medusajs.com/ui/components/copy

Render a copy button with the content to copy.

```tsx
<Copy content="yarn add @medusajs/ui" />
```

--------------------------------

### Import createDataTableCommandHelper and DataTableRowSelectionState

Source: https://docs.medusajs.com/ui/components/data-table

Add these imports from @medusajs/ui to use the command helper and row selection type.

```tsx
import {
  // ...
  createDataTableCommandHelper,
  DataTableRowSelectionState,
} from "@medusajs/ui"
```

--------------------------------

### Drawer Usage

Source: https://docs.medusajs.com/ui/components/drawer

Import the Drawer component and use its subcomponents to create a sliding panel with trigger, content, header, title, body, and footer.

```tsx
import { Drawer } from "@medusajs/ui"
```

```tsx
<Drawer>
  <Drawer.Trigger>Trigger</Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>Drawer Title</Drawer.Title>
    </Drawer.Header>
    <Drawer.Body>Body</Drawer.Body>
    <Drawer.Footer>Footer</Drawer.Footer>
  </Drawer.Content>
</Drawer>
```

--------------------------------

### Import and render Text component

Source: https://docs.medusajs.com/ui/components/text

Import the Text component from the Medusa UI package and render it with default typography styles.

```tsx
import { Text } from "@medusajs/ui"
```

```tsx
<Text>Text</Text>
```

--------------------------------

### Configure Tailwind CSS v3 for Medusa UI in a monorepo

Source: https://docs.medusajs.com/ui/installation/standalone-project

Resolve the path to the @medusajs/ui package from the monorepo root using Node's path module and require.resolve.

```typescript
const path = require("path")

const uiPath = path.resolve(
  require.resolve("@medusajs/ui"),
  "../..",
  "\*_/_.{js,jsx,ts,tsx}"
)

module.exports = {
  presets: [require("@medusajs/ui-preset")],
  content: [
    // ...
    uiPath,
  ],
  // ...
}
```

--------------------------------

### Import DatePicker

Source: https://docs.medusajs.com/ui/components/date-picker

Import the DatePicker component from the @medusajs/ui package.

```tsx
import { DatePicker } from "@medusajs/ui"
```

--------------------------------

### Basic FocusModal Usage

Source: https://docs.medusajs.com/ui/components/focus-modal

Renders a focus modal with a trigger, header, and body. The trigger opens the modal, and the content includes a header and body.

```tsx
<FocusModal>
  <FocusModal.Trigger>Trigger</FocusModal.Trigger>
  <FocusModal.Content>
    <FocusModal.Header>Title</FocusModal.Header>
    <FocusModal.Body>Content</FocusModal.Body>
  </FocusModal.Content>
</FocusModal>
```

--------------------------------

### Import IconButton and Plus icon

Source: https://docs.medusajs.com/ui/components/icon-button

Import the IconButton component from @medusajs/ui and the Plus icon from @medusajs/icons.

```tsx
import { IconButton } from "@medusajs/ui"
import { Plus } from "@medusajs/icons"
```

--------------------------------

### Import Input component

Source: https://docs.medusajs.com/ui/components/input

Import the Input component from the @medusajs/ui package.

```tsx
import { Input } from "@medusajs/ui"
```

--------------------------------

### Basic Table Usage

Source: https://docs.medusajs.com/ui/components/table

Renders a table with a header and body using the Table component's subcomponents.

```tsx
<Table>
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>
        #
      </Table.HeaderCell>
      <Table.HeaderCell>
        Customer
      </Table.HeaderCell>
      <Table.HeaderCell>
        Email
      </Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>1</Table.Cell>
      <Table.Cell>Emil Larsson</Table.Cell>
      <Table.Cell>emil2738@gmail.com</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>
```

--------------------------------

### Import Copy Component

Source: https://docs.medusajs.com/ui/components/copy

Import the Copy component from @medusajs/ui.

```tsx
import { Copy } from "@medusajs/ui"
```

--------------------------------

### Basic Tooltip Usage

Source: https://docs.medusajs.com/ui/components/tooltip

Wrap a trigger element with Tooltip and provide the content prop to display the tooltip text.

```tsx
<Tooltip content="Tooltip content">Trigger</Tooltip>
```

--------------------------------

### Basic Badge Usage

Source: https://docs.medusajs.com/ui/components/badge

Render a basic Badge component with default styling.

```tsx
<Badge>Badge</Badge>
```

--------------------------------

### Basic IconButton usage

Source: https://docs.medusajs.com/ui/components/icon-button

Render an IconButton with a Plus icon inside.

```tsx
<IconButton>
  <Plus />
</IconButton>
```

--------------------------------

### Basic Container usage

Source: https://docs.medusajs.com/ui/components/container

Renders a Container component with the text 'Container' inside.

```tsx
<Container>Container</Container>
```

--------------------------------

### Import Badge

Source: https://docs.medusajs.com/ui/components/badge

Import the Badge component from the @medusajs/ui package.

```tsx
import { Badge } from "@medusajs/ui"
```

--------------------------------

### Add date filter with options using filterHelper.accessor

Source: https://docs.medusajs.com/ui/components/data-table

Defines a date filter for a `created_at` field with preset options like Today, Yesterday, and Last Week. The filter configuration includes format, formatting function, and range labels. The value objects use $gte and $lte conditions.

```tsx
const filters = [
  // ...
  filterHelper.accessor("created_at", {
    type: "date",
    label: "Created At",
    format: "date",
    formatDateValue: (date) => date.toLocaleString(),
    rangeOptionStartLabel: "From",
    rangeOptionEndLabel: "To",
    rangeOptionLabel: "Between",
    options: [
      {
        label: "Today",
        value: {
          $gte: new Date(new Date().setHours(0, 0, 0, 0)).toString(),
          $lte: new Date(new Date().setHours(23, 59, 59, 999)).toString(),
        },
      },
      {
        label: "Yesterday",
        value: {
          $gte: new Date(new Date().setHours(0, 0, 0, 0) - 24 * 60 * 60 * 1000).toString(),
          $lte: new Date(new Date().setHours(0, 0, 0, 0)).toString(),
        },
      },
      {
        label: "Last Week",
        value: {
          $gte: new Date(new Date().setHours(0, 0, 0, 0) - 7 * 24 * 60 * 60 * 1000).toString(),
          $lte: new Date(new Date().setHours(0, 0, 0, 0)).toString(),
        },
      },
    ],
  }),
]
```

--------------------------------

### Import ProgressTabs

Source: https://docs.medusajs.com/ui/components/progress-tabs

Import the ProgressTabs component from the @medusajs/ui package.

```tsx
import { ProgressTabs } from "@medusajs/ui"
```

--------------------------------

### Basic Textarea Usage

Source: https://docs.medusajs.com/ui/components/textarea

Render a basic Textarea component.

```tsx
<Textarea />
```

--------------------------------

### Import Table from @medusajs/ui

Source: https://docs.medusajs.com/ui/components/table

Import the Table component from the @medusajs/ui package.

```tsx
import { Table } from "@medusajs/ui"
```

--------------------------------

### Import Button

Source: https://docs.medusajs.com/ui/components/button

Import the Button component from the Medusa UI package.

```tsx
import { Button } from "@medusajs/ui"
```

--------------------------------

### Import Select component

Source: https://docs.medusajs.com/ui/components/select

Import the Select component from the @medusajs/ui package.

```tsx
import { Select } from "@medusajs/ui"
```

--------------------------------

### Basic Button Usage

Source: https://docs.medusajs.com/ui/components/button

Render a basic button with the text 'Button'.

```tsx
<Button>Button</Button>
```
Tokens:
Raw