d1a1135328
* docs: create a new UI docs project (#13233) * docs: create a new UI docs project * fix installation errors * docs: migrate UI docs content to new project (#13241) * Fix content * added examples for some components * finish adding examples * lint fix * fix build errors * delete empty files * path fixes + refactor * fix build error
45 lines
1.6 KiB
Plaintext
45 lines
1.6 KiB
Plaintext
import { FigmaCard } from "@/components/FigmaCard"
|
|
|
|
export const metadata = {
|
|
title: `Medusa UI Documentation`,
|
|
}
|
|
|
|
# {metadata.title}
|
|
|
|
Welcome to Medusa UI, a React implementation of the Medusa design system.
|
|
|
|
Medusa UI is a collection of components, hooks, utility functions, icons, and [Tailwind CSS](https://tailwindcss.com/) classes that can be used to build
|
|
a consistent user interface across the Medusa Admin and client applications.
|
|
|
|
<FigmaCard />
|
|
|
|
---
|
|
|
|
## Packages
|
|
|
|
Medusa UI is split into multiple packages. Each package is published to npm
|
|
and can be installed separately.
|
|
|
|
- `@medusajs/ui` - React components, hooks, and utility functions used
|
|
in Medusa UI.
|
|
- `@medusajs/ui-preset` - Tailwind CSS preset containing all the classes
|
|
used in Medusa UI.
|
|
- `@medusajs/icons` - Icons used in Medusa UI.
|
|
|
|
Learn how to install and use these packages either for [Medusa Admin](./installation/medusa-admin-extension/page.mdx) customizations or a [standalone project](./installation/standalone-project/page.mdx).
|
|
|
|
---
|
|
|
|
## How Medusa UI is Built
|
|
|
|
At its core, Medusa UI is a styled and slightly opinionated implementation of [Radix Primitives](https://www.radix-ui.com/primitives).
|
|
Our team has also referenced the fantastic [shadcn/ui](https://ui.shadcn.com/) for inspiration in certain implementations.
|
|
|
|
Our team strongly believes in keeping the components simple and
|
|
composable, much like Medusa's foundation. This allows you to build whatever you need.
|
|
|
|
Our team has tried to avoid overloading
|
|
the component API and, instead, has leveraged the native HTML API, which gets implemented
|
|
and respected accordingly, and passed to the underlying elements.
|
|
|