Keep custom admin and vendor UI in the Mercur basic starter aligned with local wrappers and @medusajs/ui. Use when adding reusable UI, interactive primitives, overlays, menus, selectors, or custom dashboard components.
Use this skill when:
This starter does not assume direct Radix usage on day one.
Use this order:
@mercurjs/dashboard-shared components (TabbedForm, _DataTable, SingleColumnPage, TwoColumnPage, RouteFocusModal, Form, etc.)@medusajs/ui components (Button, Input, Select, Container, Heading, Text, StatusBadge, toast, etc.)Layout: SingleColumnPage, TwoColumnPage (.Main, .Sidebar), SectionRow
Data: _DataTable, useDataTable, DataGrid
Modal: RouteFocusModal (.Form, .Header, .Body, .Footer, .Close), RouteDrawer, StackedFocusModal, StackedDrawer
Form: Form (.Field, .Item, .Label, .Control, .ErrorMessage), (.Tab, .useForm)
Actions: (with of actions)
Hooks: , , , , ,
TabbedFormActionMenugroupsuseRouteModaluseStackedModaluseTabManagementuseTabbedFormuseDataTableuseQueryParamsPrimitives: Button, Input, Textarea, Select, Checkbox, Switch, RadioGroup
Layout: Container, Heading, Text, Table, Tabs, ProgressTabs
Status: StatusBadge — for statuses with colored dot (e.g. published, draft, active)
Tags: Badge — for counts and tags only, never for statuses
Feedback: toast
Icons: import from @medusajs/icons
StatusBadge — statuses only (published, draft, active, pending, etc.). Takes color: "green", "orange", "red", "blue", "grey".Badge — counts and tags only (e.g. "3 items", "+2 more"). Never for statuses.title is the label, value is string or ReactNode.StatusBadge, or minimal formatted content.groups array — each group is visually separated. Put destructive actions in their own group.RouteFocusModal. Renders ProgressTabs in the header navbar automatically.ProgressTabs — use TabbedForm which handles form context, keyboard shortcuts, and footer.Table from @medusajs/ui when _DataTable covers the use case.@medusajs/ui already covers the interaction.TabbedForm from @mercurjs/dashboard-shared._DataTable from @mercurjs/dashboard-shared.ProgressTabs directly for multi-step forms — use TabbedForm.Badge for status display — use StatusBadge.Badge or StatusBadge — use plain text.Before creating custom UI, ask:
@mercurjs/dashboard-shared export a component for this?@medusajs/ui solve this directly?@medusajs/ui?@mercurjs/dashboard-shared where applicable@medusajs/ui over custom primitivesStatusBadge for statuses, plain text for descriptive values