@moises.ai/design-system

@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.

Development

• Clone this repository
• Install dependencies: npm install
• Start development mode: npm run dev
• Build: npm run build

License

MIT