Design System package based on @radix-ui/themes with custom defaults
npm install @moises.ai/design-systemA comprehensive design system built on Radix UI components with custom theming and components.
``bash`
npm install @moises.ai/design-system
Import components from the main package:
`jsx
import { Box, Flex, Hello, World, Header } from "@moises.ai/design-system";
function App() {
return (
);
}
`
Import icons from the icons subpackage:
`jsx
import { PlayIcon, RecordIcon } from "@moises.ai/design-system/icons";
function IconDemo() {
return (
$3
Import primitive components:
jsx
import { Hello, World } from "@moises.ai/design-system/primitives";function PrimitivesDemo() {
return (
<>
);
}
`$3
Import the CSS styles:
jsx
import "@moises.ai/design-system/styles.css";
`Make sure to import this at the root of your application to ensure all styles are loaded correctly.
> Note: The styles.css file includes imports to Radix UI themes and custom colors. These paths are resolved when you install the package, so there's no need to install or configure anything additional.
Development
1. Clone this repository
2. Install dependencies:
3. Start development mode:
4. Build: Local Testing
To test the package locally in another project before publishing to npm:
1. Install yalc globally:
bash
npm install -g yalc
`2. In the design system directory, temporarily update the version in package.json to a unique version (e.g., "50.0.1")
3. Publish the package locally:
bash
yalc publish
`4. In the target project where you want to test the design system:
bash
yalc add @moises.ai/design-system@50.0.1
`5. When finished testing, remove the local package:
bash
# In the target project
yalc remove @moises.ai/design-system@50.0.1
npm install # or yarn to restore the published version
``MIT