@moises.ai/design-system v2.0.39
@moises.ai/design-system
A comprehensive design system built on Radix UI components with custom theming and components.
Installation
npm install @moises.ai/design-system
Usage
Basic Components
Import components from the main package:
import { Box, Flex, Hello, World, Header } from "@moises.ai/design-system";
function App() {
return (
<Box>
<Header title="My App" />
<Flex>
<Hello name="Developer" />
<World />
</Flex>
</Box>
);
}
Icons
Import icons from the icons subpackage:
import { PlayIcon, RecordIcon } from "@moises.ai/design-system/icons";
function IconDemo() {
return (
<div>
<PlayIcon />
<RecordIcon />
</div>
);
}
Primitives
Import primitive components:
import { Hello, World } from "@moises.ai/design-system/primitives";
function PrimitivesDemo() {
return (
<>
<Hello />
<World />
</>
);
}
CSS Styles
Import the CSS styles:
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
- Clone this repository
- Install dependencies:
npm install
- Start development mode:
npm run dev
- Build:
npm run build
Local Testing
To test the package locally in another project before publishing to npm:
Install yalc globally:
npm install -g yalc
In the design system directory, temporarily update the version in package.json to a unique version (e.g., "50.0.1")
Publish the package locally:
yalc publish
In the target project where you want to test the design system:
yalc add @moises.ai/design-system@50.0.1
When finished testing, remove the local package:
# In the target project yalc remove @moises.ai/design-system@50.0.1 npm install # or yarn to restore the published version
License
MIT
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago