open-index/open-npm huggingface dataset:
npm package: @mild-ui/cli
Description: Command-line interface for the mild-ui component library.
Latest version: 1.2.0

# @mild-ui/cli

Command-line interface for the mild-ui component library.

## Overview

@mild-ui/cli provides a command-line tool to add mild-ui components to your project. It supports React, Vue, and Svelte, making it easy to use mild-ui components regardless of your frontend framework choice.

## Installation

Install the CLI globally:

```bash
npm install -g @mild-ui/cli
```

## Usage

### Initialize mild-ui in your project

```bash
mild-ui init
```

This command will:
- Detect your project's framework (React, Vue, or Svelte)
- Ask you where to store your components
- Ask you where to store your styles
- Set up the necessary files and styles

### Add components to your project

```bash
# Add a button component for React (default)
mild-ui add button

# Add a button component for Vue
mild-ui add button --framework=vue

# Add a button component for Svelte
mild-ui add button --framework=svelte

# Specify a custom components directory
mild-ui add button --directory=src/ui/components

# Specify a custom styles directory
mild-ui add button --stylesDir=src/assets/styles
```

### List available components

```bash
mild-ui list
```

## Command Options

- `add <component>`: Add a component to your project
  - `--framework=<framework>`: Specify the target framework (react, vue, svelte)
  - `--directory=<dir>`: Specify the output directory for components
  - `--stylesDir=<dir>`: Specify the directory for styles
  - `--theme=<theme>`: Specify a theme to use
  - `--typescript`: Generate TypeScript files (default: true)

- `init`: Initialize mild-ui in your project
- `list`: List available components
- `help`: Display help information

## Configuration

When you initialize mild-ui, a `mild-ui.json` configuration file is created in your project root. This file stores your preferences:

```json
{
  "framework": "react",
  "typescript": true,
  "componentsDir": "src/components",
  "stylesDir": "src/styles",
  "theme": "default"
}
```

You can edit this file manually to change your configuration.

## Available Components

- Button

More components will be added in future releases.

## Documentation

For complete documentation, visit our [Storybook site](https://codewithriyan.github.io/mild-ui/).

## License

MIT
npm package: @mild-ui/core
Description: Universal design system built with SASS/SCSS - framework agnostic CSS-only core with zero dependencies
Latest version: 0.3.1

# @mild-ui/core

Pure CSS/SCSS design system with Tailwind-like utilities - framework agnostic with zero dependencies

## Overview

@mild-ui/core provides a comprehensive CSS/SCSS design system with utility classes similar to Tailwind CSS, but with the `mild-` prefix to avoid conflicts. This package contains only CSS and SCSS files - no TypeScript types or JavaScript utilities.

## Features

- **Tailwind-like utilities** with `mild-` prefix (no conflicts!)
- **Design tokens** as CSS custom properties
- **Component styles** for React/Vue packages
- **Dark/Light themes** with automatic switching
- **Responsive design** with mobile-first approach
- **Zero dependencies** - pure CSS/SCSS only

## Installation

```bash
npm install @mild-ui/core
```

## Usage

### Import CSS utilities only:
```css
@import '@mild-ui/core/css/utilities';
```

### Import full design system (utilities + components):
```css
@import '@mild-ui/core/css';
```

### Import SCSS for customization:
```scss
@use '@mild-ui/core/scss';
```

### Minified versions:
```css
@import '@mild-ui/core/css/min';
@import '@mild-ui/core/css/utilities/min';
```

## Available Utility Classes

All utilities use the `mild-` prefix to avoid conflicts with Tailwind CSS:

```html
<!-- Layout -->
<div class="mild-flex mild-items-center mild-justify-between">

<!-- Spacing -->
<div class="mild-p-4 mild-m-2 mild-gap-4">

<!-- Colors -->
<div class="mild-bg-primary-500 mild-text-white">

<!-- Typography -->
<h1 class="mild-text-xl mild-font-bold">

<!-- Borders -->
<div class="mild-border mild-border-gray-200 mild-radius-md">
```

## Use with Tailwind CSS

Since all utilities use the `mild-` prefix, you can use both libraries together:

```html
<div class="flex items-center"> <!-- Tailwind -->
  <div class="mild-p-4 mild-bg-primary-100"> <!-- Mild UI -->
    No conflicts!
  </div>
</div>
```

## Theming

Automatic dark mode support:

```css
/* System preference */
@media (prefers-color-scheme: dark) { /* handled automatically */ }

/* Manual toggle */
<html data-theme="dark">
```

## Package Exports

- `@mild-ui/core/css` - Full CSS (utilities + components)
- `@mild-ui/core/css/min` - Minified full CSS
- `@mild-ui/core/css/utilities` - Utilities only
- `@mild-ui/core/css/utilities/min` - Minified utilities
- `@mild-ui/core/scss` - Main SCSS entry point
- `@mild-ui/core/scss/utilities` - Utilities SCSS only
- `@mild-ui/core/themes/light` - Light theme CSS
- `@mild-ui/core/themes/dark` - Dark theme CSS
- `@mild-ui/core/tokens` - Design tokens JSON

## Documentation

- [Utilities Guide](./UTILITIES.md) - Complete list of utility classes
- [Storybook](https://codewithriyan.github.io/mild-ui/) - Interactive examples

## Framework Packages

This core package is used by:
- [`@mild-ui/react`](../react) - React components
- [`@mild-ui/vue`](../vue) - Vue components

## License

MIT
npm package: @mild-ui/svelte
Description: Svelte implementation of mild-ui component library.
Latest version: 0.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @mild-ui/svelte

Svelte implementation of mild-ui component library.

## Overview

@mild-ui/svelte provides Svelte components from the mild-ui library, a cross-framework UI component library inspired by the copy-paste approach of shadcn/ui. Components are designed to be copied into your project, not imported as dependencies.

## Installation

This package is typically not installed directly. Instead, use the CLI to add components to your project:

```bash
# Install the CLI globally
npm install -g @mild-ui/cli

# Initialize mild-ui in your project
mild-ui init

# Add components to your project
mild-ui add button --framework=svelte
```

## Usage

If you've added components using the CLI, you can import them directly from your components folder:

```svelte
<script>
  import { Button } from './components';
  import { Plus, ArrowRight } from 'lucide-svelte';
</script>

<div>
  <Button>Default Button</Button>
  <Button variant="secondary">Secondary Button</Button>
  <Button variant="outline" size="large">
    <svelte:fragment slot="leading-icon">
      <Plus size={16} />
    </svelte:fragment>
    Button with Icons
    <svelte:fragment slot="trailing-icon">
      <ArrowRight size={16} />
    </svelte:fragment>
  </Button>
</div>
```

## Available Components

- Button

More components will be added in future releases.

## Customization

You can customize components by editing their source code directly in your project. CSS variables can be modified to match your design system.

## Documentation

For complete documentation, visit our [Storybook site](https://codewithriyan.github.io/mild-ui/).

## License

MIT
npm package: @mild-ui/vue
Description: Vue implementation of mild-ui component library.
Latest version: 0.1.2

# @mild-ui/vue

Vue implementation of mild-ui component library.

## Overview

@mild-ui/vue provides Vue components from the mild-ui library, a cross-framework UI component library inspired by the copy-paste approach of shadcn/ui. Components are designed to be copied into your project, not imported as dependencies.

## Installation

This package is typically not installed directly. Instead, use the CLI to add components to your project:

```bash
# Install the CLI globally
npm install -g @mild-ui/cli

# Initialize mild-ui in your project
mild-ui init

# Add components to your project
mild-ui add button --framework=vue
```

## Usage

If you've added components using the CLI, you can import them directly from your components folder:

```vue
<template>
  <div>
    <Button>Default Button</Button>
    <Button variant="secondary">Secondary Button</Button>
    <Button variant="outline" size="large">
      <template #leading-icon>
        <PlusIcon size="16" />
      </template>
      Button with Icons
      <template #trailing-icon>
        <ArrowRightIcon size="16" />
      </template>
    </Button>
  </div>
</template>

<script setup>
import { Button } from "./components";
import { PlusIcon, ArrowRightIcon } from "lucide-vue-next";
</script>
```

## Available Components

- Button

More components will be added in future releases.

## Customization

You can customize components by editing their source code directly in your project. CSS variables can be modified to match your design system.

## Documentation

For complete documentation, visit our [Storybook site](https://codewithriyan.github.io/mild-ui/).

## License

MIT