### Generate All Components with Full Setup

Source: https://context7.com/mishka-group/mishka_chelekom/llms.txt

Use this command for a recommended full setup in a new project, generating all components with import macros and helpers.

```bash
mix mishka.ui.gen.components --import --helpers --global --yes
```

--------------------------------

### Start Standalone MCP Server with `mishka.mcp.server`

Source: https://context7.com/mishka-group/mishka_chelekom/llms.txt

Starts a standalone Model Context Protocol server for AI tool integration. Supports custom ports and provides examples for connecting AI tools like Claude and Cursor/VS Code.

```bash
mix mishka.mcp.server
```

```bash
mix mishka.mcp.server --port 5000
```

```bash
claude mcp add --transport http mishka-chelekom http://localhost:4003/mcp
```

```json
{
  "mcpServers": {
    "mishka-chelekom": {
      "type": "http",
      "url": "http://localhost:4003/mcp"
    }
  }
}
```

--------------------------------

### Basic Pagination Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/pagination.md

A simple pagination component setup with a total number of pages and a current page binding.

```heex
<.pagination total={10} current={@page} on_change="page_changed" />
```

--------------------------------

### Software Product Mega Menu Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/mega_menu.md

Implement a mega menu for software product navigation, displaying product cards with icons and descriptions. This example uses the `shadow` variant and `extra_large` padding.

```heex
<.mega_menu variant="shadow" padding="extra_large">
  <:trigger>
    <button class="flex items-center gap-1">
      Products <.icon name="hero-chevron-down" class="size-4" />
    </button>
  </:trigger>
  <div class="grid grid-cols-3 gap-8 min-w-[700px]">
    <a href="/product-a" class="p-4 hover:bg-gray-50 rounded-lg group">
      <.icon name="hero-cube" class="size-8 text-primary-500 mb-3" />
      <h4 class="font-bold group-hover:text-primary-500">Product A</h4>
      <p class="text-sm text-gray-600 mt-1">Description of product A features.</p>
    </a>
    <a href="/product-b" class="p-4 hover:bg-gray-50 rounded-lg group">
      <.icon name="hero-chart-bar" class="size-8 text-primary-500 mb-3" />
      <h4 class="font-bold group-hover:text-primary-500">Product B</h4>
      <p class="text-sm text-gray-600 mt-1">Description of product B features.</p>
    </a>
    <a href="/product-c" class="p-4 hover:bg-gray-50 rounded-lg group">
      <.icon name="hero-shield-check" class="size-8 text-primary-500 mb-3" />
      <h4 class="font-bold group-hover:text-primary-500">Product C</h4>
      <p class="text-sm text-gray-600 mt-1">Description of product C features.</p>
    </a>
  </div>
</.mega_menu>
```

--------------------------------

### Price Input with Start Section

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/number_field.md

Example of a price input field with a currency symbol prepended using the `start_section` slot.

```heex
<.number_field name="price" label="Price" min={0} step={0.01}>
  <:start_section>$</:start_section>
</.number_field>
```

--------------------------------

### Mishka UI CSS Configuration File Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/mix-tasks.md

Example structure of the Mishka UI CSS configuration file, showing options for excluding components, limiting generated options, prefix settings, and CSS customization.

```elixir
[ 
  # Exclude specific components
  exclude_components: [],

  # Limit generated options
  component_colors: [],      # e.g., ["primary", "danger"]
  component_variants: [],    # e.g., ["default", "outline"]
  component_sizes: [],       # e.g., ["small", "medium"]
  component_rounded: [],
  component_padding: [],
  component_space: [],

  # Prefix settings
  component_prefix: nil,     # e.g., "mishka_"
  module_prefix: nil,        # e.g., "Mishka"

  # CSS customization
  css_merge_strategy: :merge,  # :merge or :replace
  custom_css_path: nil,
  css_overrides: %{
    # "--primary": "#custom-color"
  }
]
```

--------------------------------

### Generate All Components

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/docs/getting-started.md

Install all available components at once using the `mix mishka.ui.gen.components` task.

```bash
mix mishka.ui.gen.components
```

--------------------------------

### Resources Mega Menu Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/mega_menu.md

Create a mega menu for resources, organizing links into 'Learn' and 'Community' sections with icons. This example uses the `shadow` variant and a `white` color.

```heex
<.mega_menu variant="shadow" color="white">
  <:trigger>
    <button class="flex items-center gap-1">
      Resources <.icon name="hero-chevron-down" class="size-4" />
    </button>
  </:trigger>
  <div class="grid grid-cols-2 gap-6 p-6 min-w-[500px]">
    <div>
      <h4 class="font-bold mb-4">Learn</h4>
      <.list variant="transparent" size="small">
        <:item icon="hero-book-open" padding="small" class="hover:bg-gray-50 rounded">
          Documentation
        </:item>
        <:item icon="hero-academic-cap" padding="small" class="hover:bg-gray-50 rounded">
          Tutorials
        </:item>
        <:item icon="hero-play-circle" padding="small" class="hover:bg-gray-50 rounded">
          Video Guides
        </:item>
      </.list>
    </div>
    <div>
      <h4 class="font-bold mb-4">Community</h4>
      <.list variant="transparent" size="small">
        <:item icon="hero-user-group" padding="small" class="hover:bg-gray-50 rounded">
          Forum
        </:item>
        <:item icon="hero-chat-bubble-left-right" padding="small" class="hover:bg-gray-50 rounded">
          Discord
        </:item>
        <:item icon="hero-code-bracket" padding="small" class="hover:bg-gray-50 rounded">
          GitHub
        </:item>
      </.list>
    </div>
  </div>
</.mega_menu>
```

--------------------------------

### Install Assets with `mishka.assets.install`

Source: https://context7.com/mishka-group/mishka_chelekom/llms.txt

Executes package manager commands (npm, yarn, bun) from the `assets/` directory. Supports installing, adding, and removing packages.

```bash
mix mishka.assets.install npm
```

```bash
mix mishka.assets.install yarn install tailwindcss
```

```bash
mix mishka.assets.install bun
```

```bash
mix mishka.assets.install npm pkg remove lodash
```

```bash
mix mishka.assets.install yarn pkg remove some-package
```

--------------------------------

### Basic Collapse Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/collapse.md

A simple example of the collapse component with a button to toggle content visibility.

```heex
<.collapse id="basic-collapse">
  <:trigger>
    <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg">
      Toggle Content
    </button>
  </:trigger>
  <p class="p-4">
    This content can be toggled on and off.
  </p>
</.collapse>
```

--------------------------------

### Basic Button Examples

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/button.md

Demonstrates the default button and how to apply primary and danger colors.

```heex
<.button>Default Button</.button>
```

```heex
<.button color="primary">Primary</.button>
```

```heex
<.button color="danger" variant="default">Danger</.button>
```

--------------------------------

### Basic Video Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/video.md

A simple example of embedding a video using the `src` attribute. Ensure the video file is accessible at the provided URL.

```heex
<.video src="/videos/intro.mp4" />
```

--------------------------------

### Profile Form Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/text_field.md

An example of a profile form demonstrating text fields for display name, bio, and website.

```heex
<.form for={@form} phx-submit="update_profile">
  <.text_field
    field={@form[:display_name]}
    label="Display Name"
    description="This is how others will see you"
  />
  <.text_field
    field={@form[:bio]}
    label="Bio"
    placeholder="Tell us about yourself"
  />
  <.text_field field={@form[:website]} label="Website">
    <:start_section>
      <span class="text-gray-500 text-sm">https://</span>
    </:start_section>
  </.text_field>
</.form>
```

--------------------------------

### Install Mishka Chelekom with Phoenix

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/README.md

Use this command to create a new Phoenix application with Mishka Chelekom installed.

```bash
mix igniter.new my_app --with phx.new --install mishka_chelekom
```

--------------------------------

### Start Mishka Chelekom MCP Server

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/mix-tasks.md

Starts the Mishka Chelekom MCP Server. Use the default port or specify a custom one.

```bash
mix mishka.mcp.server

mix mishka.mcp.server --port 5000
```

--------------------------------

### Mixed Layout Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/layout.md

Combine flex and grid components to create complex layouts. This example shows a header, main content with a grid, and a footer.

```heex
<.flex direction="col" gap="8">
  <header>
    <.flex justify="between" align="center">
      <div>Logo</div>
      <nav>Navigation</nav>
    </.flex>
  </header>

  <main>
    <.grid cols={3} gap="6">
      <div class="col-span-2">Main content</div>
      <aside>Sidebar</aside>
    </.grid>
  </main>

  <footer>Footer</footer>
</.flex>
```

--------------------------------

### Basic Stepper Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/stepper.md

A simple stepper with completed, current, and default steps.

```heex
<.stepper>
  <.stepper_section step="completed" title="Step 1" description="Account created" />
  <.stepper_section step="current" title="Step 2" description="Verify email" />
  <.stepper_section title="Step 3" description="Complete profile" />
</.stepper>
```

--------------------------------

### Basic Navbar Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/navbar.md

A simple navbar with a logo, navigation links, and a sign-up button. Ensure the `icon` component is a necessary dependency.

```heex
<.navbar color="white" variant="shadow">
  <:brand>
    <img src="/logo.svg" alt="Logo" class="h-8" />
  </:brand>
  <nav class="flex gap-6">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
  <:action>
    <.button color="primary">Sign Up</.button>
  </:action>
</.navbar>
```

--------------------------------

### Basic Table Content Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/table_content.md

A simple example of the table content component with a title and basic content items, each linked to a section.

```heex
<.table_content title="Contents">
  <.content_item icon="hero-hashtag">
    <.link href="#introduction">Introduction</.link>
  </.content_item>
  <.content_item icon="hero-hashtag">
    <.link href="#getting-started">Getting Started</.link>
  </.content_item>
  <.content_item icon="hero-hashtag">
    <.link href="#examples">Examples</.link>
  </.content_item>
</.table_content>
```

--------------------------------

### Blog Post Editor Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/textarea_field.md

An example of using a large, bordered textarea for writing blog post content, emphasizing a spacious editing area.

```heex
<.textarea_field
  field={@form[:content]}
  label="Post Content"
  size="extra_large"
  variant="bordered"
  placeholder="Write your post content here..."
/>
```

--------------------------------

### Shipping Options Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/radio_card.md

An example of using the radio card component to present shipping options with a 'bordered' variant. It includes custom content for pricing or delivery times.

```heex
<.radio_card name="shipping" variant="bordered">
  <:radio value="standard" title="Standard Shipping" description="5-7 business days">
    <span class="font-bold">Free</span>
  </:radio>
  <:radio value="express" title="Express Shipping" description="2-3 business days">
    <span class="font-bold">$9.99</span>
  </:radio>
</.radio_card>
```

--------------------------------

### Popover Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/js/floating.md

A standard popover implementation that displays additional information when triggered.

```heex
<.popover id="help-popover">
  <:trigger>
    <.icon name="hero-question-mark-circle" class="size-5 cursor-help" />
  </:trigger>
  <:content>
    <h4 class="font-medium">Need Help?</h4>
    <p class="text-sm text-gray-600">
      Click here to learn more about this feature.
    </p>
  </:content>
</.popover>
```

--------------------------------

### Basic Sidebar Usage

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/js/sidebar.md

A basic example of rendering a sidebar with navigation items.

```heex
<.sidebar id="app-sidebar">
  <:item icon="hero-home" label="Dashboard" link={~p"/"} />
  <:item icon="hero-users" label="Users" link={~p"/users"} />
  <:item icon="hero-cog-6-tooth" label="Settings" link={~p"/settings"} />
</.sidebar>
```

--------------------------------

### Skip Confirmation Prompts

Source: https://context7.com/mishka-group/mishka_chelekom/llms.txt

Use the --yes flag to skip confirmation prompts during setup.

```bash
mix mishka.mcp.setup --yes
```

```bash
claude mcp add --transport http mishka-chelekom http://localhost:4000/mcp
```

--------------------------------

### Basic Banner Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/banner.md

A simple banner displaying a welcome message. Ensure the `id` attribute is provided for unique identification.

```heex
<.banner id="announcement">
  Welcome to our website! Check out our new features.
</.banner>
```

--------------------------------

### Accordion HEEx Component Example

Source: https://context7.com/mishka-group/mishka_chelekom/llms.txt

Example of an FAQ accordion using HEEx, demonstrating multiple open states, server-sent events, and initial open items. Configure variants, colors, spacing, and rounded corners as needed.

```heex
<%# FAQ accordion with multiple open, server events, initial open state %>
<.accordion
  variant="bordered_separated"
  color="natural"
  space="medium"
  rounded="large"
  multiple={true}
  server_events={true}
  event_handler="handle_accordion"
  initial_open={["faq-1", "faq-3"]}
>
  <:item id="faq-1" title="How do I reset my password?" icon="hero-key">
    Go to the login page and click "Forgot Password."
  </:item>
  <:item id="faq-2" title="Can I cancel my subscription?" icon="hero-x-circle">
    Yes, you can cancel at any time from your account settings.
  </:item>
  <:item id="faq-3" title="Do you offer refunds?" icon="hero-currency-dollar">
    We offer a 30-day money-back guarantee.
  </:item>
</.accordion>
```

--------------------------------

### Basic URL Field Usage

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/url_field.md

A simple example of how to render a URL field with a name and label.

```heex
<.url_field name="website" label="Website" />
```

--------------------------------

### Basic Tooltip Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/tooltip.md

A simple tooltip with a button trigger and text content.

```heex
<.tooltip>
  <:trigger>
    <.button>Hover me</.button>
  </:trigger>
  <:content>This is a tooltip</:content>
</.tooltip>
```

--------------------------------

### Multi-Step Progress Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/progress.md

Illustrates how to display progress for multi-step processes. The 'value' is calculated based on current and total steps.

```heex
<.progress value={(@current_step / @total_steps) * 100} color="primary" size="small">
  Step {@current_step} of {@total_steps}
</.progress>
```

--------------------------------

### Bars Style Spinner Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/spinner.md

Sets up a spinner with the 'bars' animation type, 'success' color, and 'large' size.

```heex
<.spinner type="bars" color="success" size="large" />
```

--------------------------------

### Textarea Field with Placeholder

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/textarea_field.md

Demonstrates adding placeholder text to guide user input.

```heex
<.textarea_field
  name="bio"
  label="Bio"
  placeholder="Tell us about yourself..."
/>
```

--------------------------------

### Basic Textarea Field Usage

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/textarea_field.md

A simple example of how to render a textarea field with a name and label.

```heex
<.textarea_field name="message" label="Message" />
```

--------------------------------

### URL Field with Placeholder

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/url_field.md

Demonstrates how to add a placeholder to guide user input for the URL field.

```heex
<.url_field
  name="website"
  label="Website URL"
  placeholder="https://example.com"
/>
```

--------------------------------

### Android Mockup Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/device_mockup.md

Use the `device_mockup` component to show an Android device frame. Specify `type="android"` and provide the `image` URL for the screen.

```heex
<.device_mockup type="android" image="/images/android-screenshot.png" />
```

--------------------------------

### Laptop Mockup Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/device_mockup.md

Display content within a laptop frame by using `type="laptop"` and the `image` attribute for the screen content.

```heex
<.device_mockup type="laptop" image="/images/website-screenshot.png" />
```

--------------------------------

### Basic Speed Dial Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/speed_dial.md

A fundamental Speed Dial setup with a main icon and several action items, each with an icon and a navigation link.

```heex
<.speed_dial id="actions" icon="hero-plus">
  <:item icon="hero-home" href="/" />
  <:item icon="hero-envelope" href="/contact" />
  <:item icon="hero-cog-6-tooth" href="/settings" />
</.speed_dial>
```

--------------------------------

### Generate Components with Import File and Helper Functions

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/README.md

Install components along with helper functions and macros for importing using `--import --helpers --yes`. The `--global` flag allows for replacing Phoenix core components.

```bash
# Install all components along with helper functions and macros for importing
mix mishka.ui.gen.components --import --helpers --yes
```

```bash
mix mishka.ui.gen.components alert,accordion,chat --import --helpers --yes
```

```bash
# Install all components with helper functions and macros for importing,
# and globally replace them with Phoenix core components (**Recommended**)
mix mishka.ui.gen.components --import --helpers --global --yes
```

--------------------------------

### Carousel with Different Text Positions

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/carousel.md

Examples showing how to align text content within carousel slides to the start, center, or end using the `text_position` attribute.

```heex
<.carousel id="text-positions" text_position="start">
  <:slide image="/images/slide.jpg" title="Left Aligned" description="Text on left" />
</.carousel>

<.carousel id="text-center" text_position="center">
  <:slide image="/images/slide.jpg" title="Centered" description="Text in center" />
</.carousel>

<.carousel id="text-end" text_position="end">
  <:slide image="/images/slide.jpg" title="Right Aligned" description="Text on right" />
</.carousel>
```

--------------------------------

### Buttons with Icons

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/button.md

Demonstrates how to add icons to buttons, including placement at the start or end, and icon-only buttons.

```heex
<.button icon="hero-plus" color="primary">Add Item</.button>
```

```heex
<.button icon="hero-arrow-right" right_icon color="success">
  Continue
</.button>
```

```heex
<.button icon="hero-trash" color="danger" />
```

--------------------------------

### Basic Footer Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/footer.md

A simple footer with dark color and large padding, containing a copyright notice.

```heex
<.footer color="dark" padding="large">
  <.footer_section>
    <p>&copy; 2024 Company Name. All rights reserved.</p>
  </.footer_section>
</.footer>
```

--------------------------------

### Basic Timeline Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/timeline.md

Demonstrates a simple vertical timeline with three events. Each event contains a bold title and a smaller description.

```heex
<.timeline>
  <.timeline_section>
    <p class="font-bold">Event 1</p>
    <p class="text-sm text-gray-600">Description of event 1</p>
  </.timeline_section>
  <.timeline_section>
    <p class="font-bold">Event 2</p>
    <p class="text-sm text-gray-600">Description of event 2</p>
  </.timeline_section>
  <.timeline_section>
    <p class="font-bold">Event 3</p>
    <p class="text-sm text-gray-600">Description of event 3</p>
  </.timeline_section>
</.timeline>
```

--------------------------------

### Clickable Popover Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/js/floating.md

A popover configured to open on click rather than hover, suitable for interactive content.

```heex
<.popover id="info-popover" clickable={true}>
  <:trigger>
    <.button>Click for Info</.button>
  </:trigger>
  <:content>
    <p>This popover opens on click.</p>
    <.button size="small">Action</.button>
  </:content>
</.popover>
```

--------------------------------

### URL Field with Start Section Icon

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/url_field.md

Adds an icon to the start section of the URL field for visual enhancement.

```heex
<.url_field name="website" label="Website">
  <:start_section>
    <.icon name="hero-link" class="size-5" />
  </:start_section>
</.url_field>
```

--------------------------------

### Basic Dropdown with Styled Content

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/dropdown.md

A simple dropdown example showcasing styled content with a button trigger and a list of actions.

```heex
<.dropdown relative="relative" clickable>
  <:trigger>
    <.button color="primary">Options</.button>
  </:trigger>
  <:content variant="shadow" color="white" rounded="large" padding="medium" width="fit">
    <div class="min-w-48">
      <p class="font-semibold mb-2">Actions</p>
      <.list size="small">
        <:item padding="small">View Details</:item>
        <:item padding="small">Edit</:item>
        <:item padding="small">Delete</:item>
      </.list>
    </div>
  </:content>
</.dropdown>
```

--------------------------------

### Generate multiple components with import file and skip prompts

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/mix-tasks.md

Generate all components and create an import macro file, skipping all confirmation prompts.

```bash
mix mishka.ui.gen.components --import --yes
```

--------------------------------

### Responsive Preview with Multiple Device Mockups

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/device_mockup.md

Create a responsive preview by arranging iPhone, iPad, and laptop mockups using flexbox and wrap. This demonstrates how an application appears across different screen sizes.

```heex
<div class="flex flex-wrap justify-center gap-8 items-end">
  <.device_mockup type="iphone" image="/images/mobile.png" />
  <.device_mockup type="ipad" image="/images/tablet.png" />
  <.device_mockup type="laptop" image="/images/desktop.png" />
</div>
```

--------------------------------

### iMac Mockup Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/device_mockup.md

Create an iMac frame mockup by specifying `type="imac"` and using the `image` attribute for the desktop screen.

```heex
<.device_mockup type="imac" image="/images/desktop-screenshot.png" />
```

--------------------------------

### Footer Variants Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/footer.md

Demonstrates different visual variants of the footer component, including 'default', 'shadow', 'bordered', and 'gradient'.

```heex
<.footer variant="default" color="natural">Default</.footer>
<.footer variant="shadow" color="white">Shadow</.footer>
<.footer variant="bordered" color="primary">Bordered</.footer>
<.footer variant="gradient" color="primary">Gradient</.footer>
```

--------------------------------

### Basic Timeline Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/timeline.md

Displays a simple order tracking timeline with predefined sections and status updates. Use this for straightforward event sequences.

```heex
<.timeline color="primary" hide_last_line>
  <.timeline_section icon="hero-check" color="success">
    <p class="font-bold">Order Confirmed</p>
    <p class="text-sm text-gray-600">March 1, 2024 at 10:30 AM</p>
  </.timeline_section>
  <.timeline_section icon="hero-cube" color="success">
    <p class="font-bold">Packed</p>
    <p class="text-sm text-gray-600">March 2, 2024 at 2:15 PM</p>
  </.timeline_section>
  <.timeline_section icon="hero-truck" color="primary">
    <p class="font-bold">In Transit</p>
    <p class="text-sm text-gray-600">Expected: March 5, 2024</p>
  </.timeline_section>
  <.timeline_section icon="hero-home" color="natural">
    <p class="font-bold text-gray-400">Delivered</p>
    <p class="text-sm text-gray-400">Pending</p>
  </.timeline_section>
</.timeline>
```

--------------------------------

### Mishka Components Import Macro

Source: https://context7.com/mishka-group/mishka_chelekom/llms.txt

Example of the `mishka_components.ex` file generated when using the `--import` flag, showing how to import generated components.

```elixir
defmodule YourAppWeb.Components.MishkaComponents do
  defmacro __using__(_) do
    quote do
      import YourAppWeb.Components.Button, only: [button: 1, button_group: 1]
      import YourAppWeb.Components.Alert, only: [alert: 1, flash: 1, flash_group: 1]
      # ... all generated components
    end
  end
end
```

--------------------------------

### Subscription Plan Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/radio_card.md

A common pattern for displaying subscription plans using a three-column grid with shadow variant and custom pricing content. One option is pre-selected using the `checked` attribute.

```heex
<.radio_card name="subscription" cols="three" variant="shadow" class="w-full">
  <:radio value="free" title="Free" description="Forever free">
    <p class="text-2xl font-bold mt-2">$0</p>
  </:radio>
  <:radio value="pro" title="Pro" description="Most popular" checked>
    <p class="text-2xl font-bold mt-2">$19/mo</p>
  </:radio>
  <:radio value="team" title="Team" description="For organizations">
    <p class="text-2xl font-bold mt-2">$49/mo</p>
  </:radio>
</.radio_card>
```

--------------------------------

### Generate Typography Component

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/typography.md

Use this mix task to generate the typography component. No specific setup or dependencies are required beyond the standard project setup.

```bash
mix mishka.ui.gen.component typography
```

--------------------------------

### Navigation List Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/list.md

Create a navigation-style list using `variant="transparent"` and `size="small"`. Items can include icons, custom padding, and hover effects for interactive elements.

```heex
<.list variant="transparent" size="small">
  <:item icon="hero-home" padding="small" class="hover:bg-gray-100 rounded cursor-pointer">
    Dashboard
  </:item>
  <:item icon="hero-users" padding="small" class="hover:bg-gray-100 rounded cursor-pointer">
    Users
  </:item>
  <:item icon="hero-chart-bar" padding="small" class="hover:bg-gray-100 rounded cursor-pointer">
    Analytics
  </:item>
</.list>
```

--------------------------------

### Install Asset Dependencies

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/docs/cli.md

Manage npm, yarn, and bun dependencies for your project. This command normalizes commands across package managers and installs Bun if no manager is found.

```bash
mix mishka.assets.install npm install tailwindcss
```

```bash
mix mishka.assets.install yarn remove some-package
```

--------------------------------

### Feature Demonstration with Mobile and Desktop Mockups

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/device_mockup.md

Demonstrate features across different platforms by using a grid layout to display mobile (iPhone) and desktop (laptop) mockups side-by-side. This highlights feature parity or differences.

```heex
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
  <div>
    <h3 class="text-xl font-bold mb-4">Mobile Experience</h3>
    <.device_mockup type="iphone" image="/images/feature-mobile.png" />
  </div>
  <div>
    <h3 class="text-xl font-bold mb-4">Desktop Experience</h3>
    <.device_mockup type="laptop" image="/images/feature-desktop.png" />
  </div>
</div>
```

--------------------------------

### Tutorial Video Pattern

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/video.md

Pattern for displaying a tutorial video within a card component, including dynamic loading of captions from a collection. This example demonstrates integrating the video with other UI elements like titles and descriptions.

```heex
<.card>
  <.video
    src={@tutorial.video_url}
    thumbnail={@tutorial.thumbnail}
    rounded="medium"
  >
    <:track
      :for={caption <- @tutorial.captions}
      src={caption.url}
      kind="subtitles"
      srclang={caption.lang}
      label={caption.label}
    />
  </.video>

  <div class="p-4">
    <.h3>{@tutorial.title}</.h3>
    <.p color="natural" size="small">{@tutorial.description}</.p>
  </div>
</.card>
```

--------------------------------

### Nested Fieldsets Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/fieldset.md

Shows how to nest fieldset components to create hierarchical grouping of form elements. This example uses 'transparent' variant and 'small' padding for inner fieldsets.

```heex
<.fieldset legend="Account Settings" variant="outline">
  <:control>
    <.fieldset legend="Personal" variant="transparent" padding="small">
      <:control>
        <.text_field name="username" label="Username" />
        <.email_field name="email" label="Email" />
      </:control>
    </.fieldset>

    <.fieldset legend="Security" variant="transparent" padding="small">
      <:control>
        <.password_field name="password" label="Password" />
        <.checkbox_field name="2fa" label="Enable 2FA" />
      </:control>
    </.fieldset>
  </:control>
</.fieldset>
```

--------------------------------

### Displaying Navigation and Action Shortcuts

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/keyboard.md

Use the keyboard component to display navigation and action shortcuts within a help modal. This example shows how to represent multi-key shortcuts like 'G H' and single-key shortcuts like '/' or 'N'.

```heex
<.keyboard size="small">G H</.keyboard>
```

```heex
<.keyboard size="small">/</span>
```

```heex
<.keyboard size="small">N</.keyboard>
```

```heex
<.keyboard size="small">E</.keyboard>
```

--------------------------------

### Badge HEEx Component Examples

Source: https://context7.com/mishka-group/mishka_chelekom/llms.txt

Examples of using the Badge component in HEEx for notification counters, status indicators, and dismissible tags. Utilize `badge_position`, `circle`, `indicator`, and `pinging` attributes for different effects.

```heex
<%# Notification counter floating badge %>
<div class="relative inline-block">
  <button class="p-2"><.icon name="hero-bell" class="size-6" /></button>
  <.badge badge_position="top-right" circle color="danger" size="extra_small">
    {@unread_count}
  </.badge>
</div>

<%# Status indicator with pinging animation %>
<.badge indicator pinging={@user.online} color={if @user.online, do: "success", else: "natural"}>
  {if @user.online, do: "Online", else: "Offline"}
</.badge>

<%# Dismissible tag list %>
<div class="flex gap-2 flex-wrap">
  <.badge
    :for={tag <- @tags}
    id={"tag-" <> to_string(tag.id)}
    dismiss
    color="primary"
    variant="bordered"
    params={%{kind: "tag", tag_id: tag.id}}
  >
    {tag.name}
  </.badge>
</div>
```

--------------------------------

### Generate Components with Import File

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/README.md

Generate all components and create an import file for them using the `--import --yes` flags. This simplifies the process of including generated components in your project.

```bash
mix mishka.ui.gen.components --import --yes
```

```bash
mix mishka.ui.gen.components alert,accordion,chat --import --yes
```

--------------------------------

### Initialize Mishka UI CSS Configuration

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/mix-tasks.md

Initializes the CSS configuration file for Mishka UI. Use the --force option to overwrite an existing file.

```bash
mix mishka.ui.css.config --init
```

```bash
mix mishka.ui.css.config --init --force
```

--------------------------------

### Drawer HEEx Component Examples

Source: https://context7.com/mishka-group/mishka_chelekom/llms.txt

Examples of using the Drawer component for a shopping cart and mobile navigation. Utilize `show_drawer` and `hide_drawer` JS helpers to control visibility. The `position` and `size` attributes customize the drawer's appearance and placement.

```heex
<%# Shopping cart drawer (right) %>
<.button phx-click={show_drawer("cart-drawer")} class="relative">
  <.icon name="hero-shopping-cart" />
  <.badge :if={@cart_count > 0} class="absolute -top-2 -right-2">{@cart_count}</.badge>
</.button>

<.drawer id="cart-drawer" position="right" size="large">
  <:header>Shopping Cart ({@cart_count})</:header>
  <div class="space-y-4">
    <div :for={item <- @cart_items} class="flex gap-4 border-b pb-4">
      <img src={item.image} class="w-16 h-16 object-cover rounded" />
      <div class="flex-1">
        <p class="font-medium">{item.name}</p>
        <p class="text-gray-500">${item.price}</p>
      </div>
    </div>
  </div>
  <div class="mt-auto pt-4 border-t">
    <.button full_width color="primary">Checkout</.button>
  </div>
</.drawer>

<%# Mobile navigation drawer (left) %>
<.button class="md:hidden" phx-click={show_drawer("mobile-nav")}>
  <.icon name="hero-bars-3" class="size-6" />
</.button>

<.drawer id="mobile-nav" position="left" size="large">
  <:header><img src="/logo.svg" class="h-8" /></:header>
  <nav class="space-y-1">
    <a :for={item <- @nav_items} href={item.path} class="block p-3 hover:bg-gray-100 rounded">
      {item.label}
    </a>
  </nav>
</.drawer>
```

--------------------------------

### Configure Cursor/VS Code for MCP (via Proxy)

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/MCP.md

If your editor does not support direct HTTP transport, use the mcp_proxy_rust to bridge stdio and HTTP. Install the proxy using 'cargo install mcp-proxy' or download from releases. Configure the .mcp.json file with the 'command' and 'args' for the proxy.

```json
{
  "mcpServers": {
    "mishka-chelekom": {
      "command": "mcp-proxy",
      "args": ["--transport", "http", "http://localhost:4003/mcp"]
    }
  }
}
```

--------------------------------

### Manage CSS Configuration

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/README.md

Use the `mishka.ui.css.config` task to manage CSS configurations. Options include creating a sample configuration file (`--init`), forcing overwrite (`--force`), regenerating CSS files (`--regenerate`), validating the configuration (`--validate`), and showing the current configuration (`--show`).

```bash
mix mishka.ui.css.config --init --force
```

```bash
mix mishka.ui.css.config --regenerate --validate --show
```

--------------------------------

### iPhone Mockup Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/device_mockup.md

Display an image within an iPhone frame using the `device_mockup` component. Ensure the `image` attribute is set to the URL of the screen content.

```heex
<.device_mockup image="/images/app-screenshot.png" />
```

--------------------------------

### Basic Alert Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/alert.md

Displays a simple informational alert with a title.

```heex
<.alert kind={:info} title="Information">
  This is an informational message.
</.alert>
```

--------------------------------

### Tooltip Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/js/floating.md

A simple tooltip that appears on hover, providing contextual information.

```heex
<.tooltip>
  <:trigger>
    <.button>Hover me</.button>
  </:trigger>
  <:content>Helpful tooltip text</:content>
</.tooltip>
```

--------------------------------

### iPad Mockup Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/device_mockup.md

Generate an iPad mockup by setting `type="ipad"` and providing the `image` attribute for the tablet screen.

```heex
<.device_mockup type="ipad" image="/images/tablet-screenshot.png" />
```

--------------------------------

### Initialize and Manage CSS Config with `mishka.ui.css.config`

Source: https://context7.com/mishka-group/mishka_chelekom/llms.txt

Manages CSS configuration for customization and regeneration. Commands include initializing/forcing config files, regenerating CSS, validating the config, and displaying the current settings. The config file (`config.exs`) allows customization of colors, variants, sizes, and more.

```bash
mix mishka.ui.css.config --init
```

```bash
mix mishka.ui.css.config --init --force
```

```bash
mix mishka.ui.css.config --regenerate
```

```bash
mix mishka.ui.css.config --validate
```

```bash
mix mishka.ui.css.config --show
```

```elixir
[ 
  exclude_components: [],
  component_colors: ["primary", "danger", "success"],
  component_variants: ["default", "outline"],
  component_sizes: ["small", "medium", "large"],
  component_rounded: [],
  component_prefix: nil,       # e.g., "mishka_"
  module_prefix: nil,          # e.g., "Mishka"
  css_merge_strategy: :merge,  # :merge or :replace
  custom_css_path: nil,
  css_overrides: %{ 
    # "--primary": "#your-color"
  }
]
```

--------------------------------

### Using Helper Functions for Alerts

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/alert.md

Demonstrates how to use helper functions like `show_alert` and `hide_alert` for programmatic control of alert visibility, often used with `phx-mounted` or button clicks.

```heex
<%# Show alert on mount %>
<.flash kind={:info} phx-mounted={show_alert("#welcome-flash")}>
  Welcome Back!
</.flash>

<%# Programmatic show/hide in LiveView %>
<button phx-click={show_alert("#my-alert")}>Show Alert</button>
<button phx-click={hide_alert("#my-alert")}>Hide Alert</button>

<.alert id="my-alert" kind={:success} title="Dynamic Alert" hidden>
  This alert can be shown/hidden programmatically.
</.alert>
```

--------------------------------

### Card Component Usage Examples

Source: https://context7.com/mishka-group/mishka_chelekom/llms.txt

Illustrates how to construct a full-featured card with media, content, and footer, including dynamic elements like badges and buttons. Also shows a user profile card with avatar and centered content.

```heex
<.card variant="shadow" rounded="large" class="overflow-hidden">
  <.card_media src={@product.image} alt={@product.name} />
  <.card_content padding="medium" space="small">
    <.card_title title={@product.name} size="medium" />
    <p class="text-gray-600">{@product.description}</p>
    <div class="flex items-center justify-between">
      <span class="text-xl font-bold">${@product.price}</span>
      <.badge :if={@product.on_sale} color="danger">Sale</.badge>
    </div>
  </.card_content>
  <.card_footer padding="medium">
    <.button full_width color="primary" icon="hero-shopping-cart">Add to Cart</.button>
  </.card_footer>
</.card>
```

```heex
<.card variant="default" color="natural" padding="large" class="text-center">
  <.avatar src={@user.avatar} size="extra_large" rounded="full" class="mx-auto" />
  <.card_content>
    <.card_title title={@user.name} position="center" />
    <p class="text-gray-500">{@user.role}</p>
  </.card_content>
  <.card_footer class="flex justify-center gap-2">
    <.button variant="outline" size="small">Message</.button>
    <.button color="primary" size="small">Follow</.button>
  </.card_footer>
</.card>
```

--------------------------------

### Select Input with Options and Prompt

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/input_field.md

Create a select dropdown by setting `type` to `"select"`. Provide options as a list of tuples and optionally set a `prompt` for a placeholder.

```heex
<.input
  type="select"
  name="country"
  label="Country"
  options={[{"United States", "us"}, {"Canada", "ca"}, {"Mexico", "mx"}]}
  prompt="Select a country"
/>
```

--------------------------------

### Basic Carousel Usage

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/js/carousel.md

Example of a basic carousel implementation using the .carousel component.

```heex
<.carousel id="my-carousel">
  <:slide image="/images/slide1.jpg">
    <h2>Slide 1</h2>
  </:slide>
  <:slide image="/images/slide2.jpg">
    <h2>Slide 2</h2>
  </:slide>
</.carousel>
```

--------------------------------

### Watch Mockup Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/device_mockup.md

Create a mockup for an Apple Watch by setting `type="watch"` and providing the `image` attribute for the watch face.

```heex
<.device_mockup type="watch" image="/images/watch-screen.png" />
```

--------------------------------

### Tooltip Colors

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/tooltip.md

Examples of using different color themes for the tooltip, such as dark and primary.

```heex
<.tooltip color="dark">
  <:trigger><span class="underline cursor-help">Dark tooltip</span></:trigger>
  <:content>Dark themed tooltip</:content>
</.tooltip>

<.tooltip color="primary">
  <:trigger><span class="underline cursor-help">Primary tooltip</span></:trigger>
  <:content>Primary themed tooltip</:content>
</.tooltip>

<.tooltip color="warning">
  <:trigger><span class="underline cursor-help">Warning tooltip</span></:trigger>
  <:content>Warning themed tooltip</:content>
</.tooltip>
```

--------------------------------

### Basic Number Field Usage

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/number_field.md

A simple example of rendering a number field with a label.

```heex
<.number_field name="quantity" label="Quantity" />
```

--------------------------------

### Full Conversation Example

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/chat.md

Illustrates a multi-message conversation with alternating sender and receiver styles.

```heex
<%# Received message %>
<.chat>
  <.avatar src="/images/support.jpg" size="small" rounded="full" />
  <.chat_section>
    Welcome to our support chat!
    <:status time="9:00 AM" />
  </.chat_section>
</.chat>

<%# Sent message %>
<.chat position="flipped" color="primary">
  <.chat_section>
    Hi, I need help with my order.
    <:status time="9:01 AM" deliver="Seen" />
  </.chat_section>
  <.avatar src="/images/me.jpg" size="small" rounded="full" />
</.chat>

<%# Received message %>
<.chat>
  <.avatar src="/images/support.jpg" size="small" rounded="full" />
  <.chat_section>
    Of course! What's your order number?
    <:status time="9:02 AM" />
  </.chat_section>
</.chat>
```

--------------------------------

### Shortcut Documentation Layout

Source: https://github.com/mishka-group/mishka_chelekom/blob/master/usage-rules/components/keyboard.md

Document common keyboard shortcuts by pairing action labels with key combinations. This example uses small variants of the keyboard component.

```heex
<div class="space-y-2">
  <div class="flex justify-between items-center">
    <span>Copy</span>
    <span class="flex items-center gap-1">
      <.keyboard size="small">&#8984;</.keyboard>
      <.keyboard size="small">C</.keyboard>
    </span>
  </div>
  <div class="flex justify-between items-center">
    <span>Paste</span>
    <span class="flex items-center gap-1">
      <.keyboard size="small">&#8984;</.keyboard>
      <.keyboard size="small">V</.keyboard>
    </span>
  </div>
  <div class="flex justify-between items-center">
    <span>Undo</span>
    <span class="flex items-center gap-1">
      <.keyboard size="small">&#8984;</.keyboard>
      <.keyboard size="small">Z</.keyboard>
    </span>
  </div>
</div>
```