@motiadev/ui

A modern React UI components library built with shadcn/ui, designed for the Motia ecosystem.

Features

🎨 Modern Design System - Built with shadcn/ui components
🚀 TypeScript First - Full TypeScript support with comprehensive types
📦 Tree Shakeable - Import only what you need
🎭 Storybook Integration - Interactive component documentation
🌗 Dark Mode Ready - Built-in support for light and dark themes
⚡ Vite Powered - Fast builds and development experience
🎯 Accessible - ARIA compliant components built on Radix UI

Installation

Since this is a workspace package, you can add it as a dependency using the workspace protocol:

{
  "dependencies": {
    "@motiadev/ui": "workspace:*"
  }
}

npm install @motiadev/ui
# or
yarn add @motiadev/ui
# or
pnpm add @motiadev/ui

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react react-dom

Usage

Import the components and styles you need:

import { Button, Card, CardHeader, CardTitle, CardContent } from '@motiadev/ui'
import '@motiadev/ui/styles.css'

function App() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Welcome to Motia UI</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  )
}

CSS Variables

The components use CSS variables for theming. Add these to your CSS:

@import '@motiadev/ui/globals.css';

Or set up your own theme variables:

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 240 9% 15%;
  --primary-foreground: 0 0% 98%;
  /* ... other variables */
}

Utilities

cn Function

A utility function for merging class names with Tailwind CSS classes.

import { cn } from '@motiadev/ui'

const className = cn(
  "base-classes",
  condition && "conditional-classes",
  "more-classes"
)

Development

To run Storybook for component development:

cd packages/ui
npm run storybook

To build the library:

npm run build

Customization

The library is built on top of Tailwind CSS and uses CSS variables for theming. You can customize the appearance by:

Overriding CSS variables in your global styles
Extending Tailwind configuration to add custom colors, spacing, etc.
Using className props to apply custom styles to individual components

License

MIT

2.5 KiB Raw Blame History