### Verify Sutra UI Installation with Button Components

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

Use these HEEX examples to render different types of buttons provided by Sutra UI. If the buttons are styled correctly, your installation is successful.

```heex
<.button>Hello Sutra UI!</.button>

<.button variant="destructive">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 size-4" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
  Delete
</.button>

<.button variant="outline" size="sm">Small Outline</.button>
```

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

### Install Dependencies with mix deps.get

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

After updating 'mix.exs', run this command in your terminal to fetch and install all project dependencies, including Sutra UI.

```bash
mix deps.get
```

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

### Example: Creating a Green Theme with OKLCH

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/theming.md

This CSS example shows how to create a green-themed color palette by defining `--primary` and `--destructive` colors using the OKLCH format. It highlights setting a green primary color and its complementary red destructive color.

```css
:root {
  /* Green primary */
  --primary: oklch(0.65 0.20 145);
  --primary-foreground: oklch(0.98 0 0);
  
  /* Complementary destructive (red) */
  --destructive: oklch(0.55 0.25 30);
  --destructive-foreground: oklch(0.98 0 0);
}
```

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

### Update MyAppWeb html_helpers to use SutraUI

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

Modify 'lib/my_app_web.ex' to remove the import of 'MyAppWeb.CoreComponents' and add 'use SutraUI' in the 'html_helpers' function. This makes all Sutra UI components available.

```elixir
defmodule MyAppWeb do
  # ...

  defp html_helpers do
    quote do
      # Remove or comment out this line:
      # import MyAppWeb.CoreComponents
      
      use SutraUI  # Add this instead (Step 5)
      
      # ... other imports
    end
  end
end
```

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

### Complete Sutra UI Theme Example (CSS)

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/theming.md

This comprehensive CSS example imports the base Sutra UI styles and then defines a full set of color and sizing variables for both light and dark modes. It includes brand colors, backgrounds, surfaces, secondary and muted colors, semantic colors, borders, input styles, ring colors, and radius.

```css
@import "../../deps/sutra_ui/priv/static/sutra_ui.css";

:root {
  /* Brand colors - Blue theme */
  --primary: oklch(0.6 0.2 260);
  --primary-foreground: oklch(0.98 0 0);
  
  /* Backgrounds */
  --background: oklch(0.99 0.002 260);
  --foreground: oklch(0.15 0.01 260);
  
  /* Cards & Surfaces */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0.01 260);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0.01 260);
  
  /* Secondary & Muted */
  --secondary: oklch(0.95 0.01 260);
  --secondary-foreground: oklch(0.2 0.02 260);
  --muted: oklch(0.95 0.01 260);
  --muted-foreground: oklch(0.5 0.02 260);
  --accent: oklch(0.95 0.01 260);
  --accent-foreground: oklch(0.2 0.02 260);
  
  /* Semantic */
  --destructive: oklch(0.55 0.25 25);
  --destructive-foreground: oklch(0.98 0 0);
  
  /* Borders */
  --border: oklch(0.9 0.01 260);
  --input: oklch(0.9 0.01 260);
  --ring: oklch(0.6 0.2 260);
  
  /* Radius */
  --radius: 0.5rem;
}

.dark {
  --primary: oklch(0.7 0.18 260);
  --primary-foreground: oklch(0.1 0 0);
  
  --background: oklch(0.12 0.01 260);
  --foreground: oklch(0.95 0.005 260);
  
  --card: oklch(0.15 0.01 260);
  --card-foreground: oklch(0.95 0.005 260);
  --popover: oklch(0.15 0.01 260);
  --popover-foreground: oklch(0.95 0.005 260);
  
  --secondary: oklch(0.2 0.01 260);
  --secondary-foreground: oklch(0.9 0.005 260);
  --muted: oklch(0.2 0.01 260);
  --muted-foreground: oklch(0.6 0.02 260);
  --accent: oklch(0.25 0.02 260);
  --accent-foreground: oklch(0.9 0.005 260);
  
  --destructive: oklch(0.6 0.22 25);
  --destructive-foreground: oklch(0.98 0 0);
  
  --border: oklch(0.25 0.01 260);
  --input: oklch(0.25 0.01 260);
  --ring: oklch(0.5 0.15 260);
}
```

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

### Add Sutra UI Dependencies to mix.exs

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

Add the 'sutra_ui' and 'jason' libraries to your project's dependencies in the 'mix.exs' file. 'jason' is required for specific components like 'dropdown_menu' and 'live_select'.

```elixir
def deps do
  [
    {:sutra_ui, "~> 0.1"},
    {:jason, "~> 1.0"}  # Required for dropdown_menu and live_select
  ]
end
```

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

### Simple Form Component Examples

Source: https://context7.com/gurujada/sutra_ui/llms.txt

Demonstrates the usage of the `.simple_form` component for creating HTML forms with automatic styling via CSS context selectors. Includes examples for basic forms, integration with Phoenix.Component.form for LiveView, and traditional forms with explicit actions and methods.

```elixir
# Simple HTML form
<.simple_form class="grid gap-6">
  <div class="grid gap-2">
    <label for="username">Username</label>
    <input type="text" id="username" placeholder="Enter username" />
    <p class="text-muted-foreground text-sm">This is your public display name.</p>
  </div>

  <div class="grid gap-2">
    <label for="email">Email</label>
    <input type="email" id="email" placeholder="m@example.com" />
  </div>

  <div class="grid gap-2">
    <label for="bio">Bio</label>
    <textarea id="bio" placeholder="Tell us about yourself..." rows="3"></textarea>
  </div>

  <button type="submit" class="btn">Submit</button>
</.simple_form>
```

```elixir
# With Phoenix.Component.form for LiveView
<.form :let={f} for={@changeset} class="form grid gap-6" phx-change="validate" phx-submit="save">
  <div class="grid gap-2">
    <label for={f[:name].id}>Name</label>
    <input type="text" name={f[:name].name} value={f[:name].value} />
  </div>
  <div class="grid gap-2">
    <label for={f[:email].id}>Email</label>
    <input type="email" name={f[:email].name} value={f[:email].value} />
  </div>
  <button type="submit" class="btn">Save</button>
</.form>
```

```elixir
# Traditional form with action
<.simple_form action="/login" method="post" class="space-y-4">
  <div class="grid gap-2">
    <label for="email">Email</label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="grid gap-2">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" required />
  </div>
  <div class="flex items-center gap-2">
    <input type="checkbox" name="remember_me" id="remember_me" />
    <label for="remember_me">Remember me</label>
  </div>
  <button type="submit" class="btn w-full">Sign In</button>
</.simple_form>
```

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

### Import Specific Sutra UI Components

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

Alternatively to using 'use SutraUI', you can import individual components like Button, Dialog, and Input directly into your LiveView module. This is useful for smaller projects or when you only need a few components.

```elixir
defmodule MyAppWeb.SomeLive do
  use MyAppWeb, :live_view
  
  import SutraUI.Button
  import SutraUI.Dialog
  import SutraUI.Input
  
  # ...
end
```

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

### Deployment Setup for Assets (Elixir)

Source: https://github.com/gurujada/sutra_ui/blob/master/README.md

Updates the 'assets.deploy' alias in mix.exs to include steps for compiling colocated hooks, minifying JavaScript with esbuild, minifying CSS with Tailwind, and performing Phoenix digest.

```elixir
"assets.deploy": [
  "compile",  # Required: extracts colocated hooks
  "esbuild my_app --minify",
  "tailwind my_app --minify",
  "phx.digest"
]
```

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

### Testing Components with ComponentCase

Source: https://github.com/gurujada/sutra_ui/blob/master/usage_rules.md

Provides an example of how to write tests for Sutra UI components using the `ComponentCase` helper, including rendering components and asserting HTML output.

```elixir
defmodule SutraUI.ComponentNameTest do
  use ComponentCase, async: true

  import SutraUI.ComponentName

  describe "component_name/1" do
    test "renders with required attributes" do
      html = render_component(&component_name/1, id: "test", required: "value")
      assert html =~ ~s(id="test")
    end

    test "applies custom class" do
      html = render_component(&component_name/1, id: "test", class: "custom")
      assert html =~ "custom"
    end
  end
end
```

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

### Deployment Configuration for Colocated Hooks

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

Ensure that 'mix compile' is executed before 'assets.deploy' in your deployment script. This is crucial for colocated hooks to be extracted correctly at compile time.

```elixir
"assets.deploy": [
  "compile",  # Must come first
  "esbuild my_app --minify",
  "tailwind my_app --minify",
  "phx.digest"
]
```

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

### Delete Phoenix Core Components

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

Remove the default 'core_components.ex' file generated by Phoenix. Sutra UI provides its own enhanced version, and keeping both can lead to naming conflicts.

```bash
rm lib/my_app_web/components/core_components.ex
```

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

### Troubleshooting: "undefined function" Errors for Components

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

These errors indicate that the Sutra UI components have not been imported into your module. Ensure you have either added 'use SutraUI' to your 'html_helpers' or imported the specific components you are trying to use.

```elixir
use SutraUI
# or
import SutraUI.ComponentName
```

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

### Dialog Component Example (HEEx)

Source: https://github.com/gurujada/sutra_ui/blob/master/README.md

Illustrates the usage of the dialog component, including its trigger, title, description, and footer slots. It shows how to use `phx-click` to hide the dialog and trigger actions.

```heex
<.dialog id="confirm-dialog">
  <:trigger>
    <.button variant="outline">Open Dialog</.button>
  </:trigger>
  <:title>Confirm Action</:title>
  <:description>Are you sure you want to continue?</:description>
  <:footer>
    <.button variant="outline" phx-click={hide_dialog("confirm-dialog")}>
      Cancel
    </.button>
    <.button phx-click="confirm">Confirm</.button>
  </:footer>
</.dialog>
```

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

### Import Sutra UI JavaScript Hooks

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

Add the Sutra UI hooks import to your 'assets/js/app.js' file. These hooks are necessary for the interactive behavior of certain Sutra UI components.

```javascript
import { hooks as sutraUiHooks } from "phoenix-colocated/sutra_ui";
```

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

### OKLCH Color Format Example

Source: https://github.com/gurujada/sutra_ui/blob/master/README.md

This CSS example illustrates the OKLCH color format used by Sutra UI, breaking down the components: Lightness (L), Chroma (C), and Hue (H). It also provides common hue ranges for different colors.

```css
--primary: oklch(0.623 0.214 259.815);
/*         oklch(L     C     H      )
           L = Lightness (0-1)
           C = Chroma (0-0.4, saturation)
           H = Hue (0-360, color wheel)
*/

```

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

### Upgrade Phoenix Dependency for Hooks

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

Ensures compatibility for hook-based components by upgrading the Phoenix framework dependency. This is necessary for colocated hooks to function correctly.

```elixir
# mix.exs
{:phoenix, "~> 1.8"}
```

```bash
mix deps.update phoenix
```

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

### Troubleshooting: Components Render but Have No Styles

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

If Sutra UI components appear unstyled, ensure the '@source' directive is correctly added to your 'assets/css/app.css' file. This directive tells Tailwind CSS where to find the component styles. Restart your server and asset watcher after making changes.

```css
@source "../../deps/sutra_ui/lib";
```

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

### Integrate Sutra UI Hooks into LiveSocket

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

Spread the imported 'sutraUiHooks' into your LiveSocket configuration in 'assets/js/app.js'. This makes the Sutra UI components' JavaScript functionality available to your LiveView application.

```javascript
const liveSocket = new LiveSocket("/live", Socket, {
    params: { _csrf_token: csrfToken },
    hooks: { ...sutraUiHooks },  // Add other hooks here too
});
```

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

### Sutra UI Input Component Examples

Source: https://context7.com/gurujada/sutra_ui/llms.txt

Shows how to implement the Sutra UI Input component for form fields. It covers basic text, email, and password inputs, including features like placeholders, labels, and required field indicators.

```elixir
# Basic inputs
<.input type="text" name="username" placeholder="Username" />
<.input type="email" name="email" placeholder="m@example.com" />
<.input type="password" name="password" label="Password" required />
```

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

### Sutra UI Button Component Examples

Source: https://context7.com/gurujada/sutra_ui/llms.txt

Demonstrates various ways to use the Sutra UI Button component, including different variants, sizes, loading states, and navigation/form submission functionalities. The component is highly customizable for diverse UI needs.

```elixir
# Basic buttons with variants
<.button>Click me</.button>
<.button variant="destructive">Delete</.button>
<.button variant="outline">Cancel</.button>
<.button variant="ghost">Subtle Action</.button>

# Sizes and loading states
<.button size="sm">Small Button</.button>
<.button size="lg">Large Button</.button>
<.button size="icon" aria-label="Settings">
  <svg><!-- icon --></svg>
</.button>

<.button loading phx-click="save">
  <.spinner class="mr-2" /> Saving...
</.button>

# Navigation
<.button navigate={~p"/dashboard"}>Go to Dashboard</.button>
<.button patch={~p"/users/#{@user.id}"}>View User</.button>
<.button href="https://example.com">External Link</.button>

# Form submission
<.button type="submit" phx-click="create" phx-value-id={@id}>
  Create Item
</.button>
```

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

### CSS Tailwind v4 Setup with Sutra UI

Source: https://github.com/gurujada/sutra_ui/blob/master/usage_rules.md

Shows the correct configuration for Tailwind v4 within `app.css`, including the `@source` directive to import Sutra UI's styles. Proper setup ensures components are styled correctly.

```css
@import "tailwindcss";
@source "../../deps/sutra_ui/lib";
@import "../../deps/sutra_ui/priv/static/sutra_ui.css";
```

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

### Install and Configure Sutra UI with Phoenix and Tailwind CSS

Source: https://context7.com/gurujada/sutra_ui/llms.txt

This snippet outlines the necessary steps to add Sutra UI to your Phoenix project. It includes dependencies in mix.exs, imports SutraUI helpers in web.ex, configures Tailwind CSS with Sutra UI's styles, and initializes LiveSocket with colocated hooks.

```elixir
# mix.exs
def deps do
  [
    {:sutra_ui, "~> 0.1"},
    {:jason, "~> 1.0"}  # Required for dropdown_menu and live_select
  ]
end

# Then run: mix deps.get
# Delete lib/my_app_web/components/core_components.ex

# lib/my_app_web.ex
defp html_helpers do
  quote do
    use SutraUI  # Assuming SutraUI is the module name
    # ... other imports
  end
end
```

```css
/* assets/css/app.css */
@import "tailwindcss";

/* Sutra UI */
@source "../../deps/sutra_ui/lib";
@import "../../deps/sutra_ui/priv/static/sutra_ui.css";

/* Custom theme overrides */
:root {
  --primary: oklch(0.65 0.20 145);        /* Green */
  --primary-foreground: oklch(0.98 0 0);  /* White text on primary */
  --destructive: oklch(0.55 0.25 30);     /* Red */
  --radius: 0.5rem;
}

.dark {
  --primary: oklch(0.70 0.18 145);
  --destructive: oklch(0.65 0.22 25);
}
```

```javascript
// assets/js/app.js
import { hooks as sutraUiHooks } from "phoenix-colocated/sutra_ui";

const liveSocket = new LiveSocket("/live", Socket, {
    params: { _csrf_token: csrfToken },
    hooks: { ...sutraUiHooks },
});
```

```elixir
# mix.exs - Deployment aliases
"assets.deploy": [
  "compile",  # Required: extracts colocated hooks
  "esbuild my_app --minify",
  "tailwind my_app --minify",
  "phx.digest"
]
```

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

### Add Theme Switcher or Toggle Dark Mode Class

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

Enables dark mode by either integrating the provided theme switcher component or manually toggling the 'dark' class on the HTML element.

```heex
<.theme_switcher id="theme-toggle" />
```

```javascript
document.documentElement.classList.toggle('dark')
```

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

### Correct CSS Import Order for Sutra UI

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

Ensures Sutra UI styles are loaded correctly by setting the proper import order in CSS. This allows custom variable overrides to be applied after Sutra UI's styles.

```css
@import "tailwindcss";
@source "../../deps/sutra_ui/lib";
@import "../../deps/sutra_ui/priv/static/sutra_ui.css";

/* Your overrides AFTER sutra_ui.css */
:root {
  --primary: oklch(0.65 0.20 145);
}
```

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

### Data Table Examples with Phoenix LiveView

Source: https://context7.com/gurujada/sutra_ui/llms.txt

Demonstrates how to render data tables using the `.data_table` component in Phoenix LiveView. Supports features like custom columns, actions, captions, footers, styling, and pagination. Assumes necessary assigns like `@users`, `@transactions`, and `@page` are available.

```elixir
<.data_table rows={@users}>
  <:col :let={user} label="Name">{user.name}</:col>
  <:col :let={user} label="Email">{user.email}</:col>
  <:col :let={user} label="Role">
    <.badge variant={role_variant(user.role)}>{user.role}</.badge>
  </:col>
  <:action :let={user}>
    <.button size="sm" variant="ghost" navigate={~p"/users/#{user.id}"}>
      View
    </.button>
  </:action>
</.data_table>
```

```elixir
<.data_table rows={@transactions} class="w-full">
  <:caption>Recent Transactions</:caption>
  <:col :let={t} label="Date">{format_date(t.date)}</:col>
  <:col :let={t} label="Description">{t.description}</:col>
  <:col :let={t} label="Amount" class="text-right font-mono">
    {format_currency(t.amount)}
  </:col>
  <:footer>
    <td colspan="2" class="font-bold">Total</td>
    <td class="text-right font-mono font-bold">{format_currency(@total)}</td>
  </:footer>
</.data_table>
```

```elixir
<.data_table rows={@page.entries}>
  <:col :let={item} label="ID">{item.id}</:col>
  <:col :let={item} label="Name">{item.name}</:col>
</.data_table>
<.pagination
  current_page={@page.page_number}
  total_pages={@page.total_pages}
  on_page_change={fn page -> JS.push("goto_page", value: %{page: page}) end}
/>
```

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

### Setup JavaScript Hooks (JavaScript)

Source: https://github.com/gurujada/sutra_ui/blob/master/README.md

Integrates Sutra UI's colocated JavaScript hooks into your Phoenix LiveView application. Import the hooks from 'phoenix-colocated/sutra_ui' and merge them into the LiveSocket hooks configuration.

```javascript
import { hooks as sutraUiHooks } from "phoenix-colocated/sutra_ui";

const liveSocket = new LiveSocket("/live", Socket, {
    params: { _csrf_token: csrfToken },
    hooks: { ...sutraUiHooks },
});
```

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

### Setup CSS with Tailwind v4 (CSS)

Source: https://github.com/gurujada/sutra_ui/blob/master/README.md

Configures the CSS path in assets/css/app.css to include Tailwind CSS and Sutra UI's styles. The `@source` directive is used to import styles from the dependency, followed by the main sutra_ui.css file.

```css
@import "tailwindcss";

/* Sutra UI */
@source "../../deps/sutra_ui/lib";
@import "../../deps/sutra_ui/priv/static/sutra_ui.css";
```

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

### Card Component for Content Layout

Source: https://context7.com/gurujada/sutra_ui/llms.txt

Details the usage of the `<.card>` component for structuring content with distinct header, content, and footer sections. Includes examples for a basic card, a card containing a login form, and a card with an image.

```elixir
# Basic card
<.card>
  <:header>
    <h2>Card Title</h2>
    <p>Card Description</p>
  </:header>
  <:content>
    <p>Card Content</p>
  </:content>
  <:footer>
    <.button>Action</.button>
  </:footer>
</.card>

# Login form in card
<.card>
  <:header>
    <h2>Login to your account</h2>
    <p>Enter your details below</p>
  </:header>
  <:content>
    <.simple_form for={@form} phx-submit="login">
      <.input field={@form[:email]} type="email" label="Email" />
      <.input field={@form[:password]} type="password" label="Password" />
      <:actions>
        <.button type="submit" class="w-full">Sign In</.button>
      </:actions>
    </.simple_form>
  </:content>
  <:footer class="text-center">
    <p>Don't have an account? <.link navigate={~p"/register"}>Sign up</.link></p>
  </:footer>
</.card>

# Card with image (no padding on content)
<.card>
  <:content class="px-0">
    <img alt="Product" src="/images/product.jpg" class="w-full" />
  </:content>
  <:footer class="flex justify-between items-center">
    <div>
      <h3>Product Name</h3>
      <p class="text-muted-foreground">$99.99</p>
    </div>
    <.button>Add to Cart</.button>
  </:footer>
</.card>
```

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

### Sutra UI Dialog Component Examples

Source: https://context7.com/gurujada/sutra_ui/llms.txt

Illustrates the usage of the Sutra UI Dialog component for creating modal dialogs, including confirmation dialogs, form dialogs integrated with LiveView forms, and chaining dialog actions with JavaScript commands.

```elixir
# Confirmation dialog
<.dialog id="confirm-dialog">
  <:title>Confirm Action</:title>
  <:description>Are you sure you want to proceed? This cannot be undone.</:description>
  <:footer>
    <.button variant="outline" phx-click={SutraUI.Dialog.hide_dialog("confirm-dialog")}>
      Cancel
    </.button>
    <.button phx-click="confirm">Confirm</.button>
  </:footer>
</.dialog>

# Trigger button
<.button phx-click={SutraUI.Dialog.show_dialog("confirm-dialog")}>
  Open Dialog
</.button>

# Form dialog with LiveView
<.dialog id="edit-user-dialog">
  <:title>Edit Profile</:title>
  <.simple_form for={@form} phx-submit="save_user">
    <.input field={@form[:name]} label="Name" />
    <.input field={@form[:email]} label="Email" type="email" />
    <:actions>
      <.button type="submit">Save Changes</.button>
    </:actions>
  </.simple_form>
</.dialog>

# Chain with other JS commands
<.button phx-click={
  JS.push("prepare_data")
  |> SutraUI.Dialog.show_dialog("my-dialog")
}>
  Load and Open
</.button>
```

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

### Select Component with Search and Grouping

Source: https://context7.com/gurujada/sutra_ui/llms.txt

Showcases the `<.select>` component for creating dropdowns with optional search functionality and the ability to group options. It includes examples for basic usage, searchable selects, and selects with grouped options using `<.select_group>` and `<.select_separator>`.

```elixir
# Basic select
<.select id="country" name="country" value="us">
  <.select_option value="us" label="United States" />
  <.select_option value="ca" label="Canada" />
  <.select_option value="mx" label="Mexico" />
</.select>

# Searchable select
<.select id="framework" name="framework" value="phoenix" searchable>
  <.select_option value="phoenix" label="Phoenix" />
  <.select_option value="rails" label="Rails" />
  <.select_option value="django" label="Django" />
  <.select_option value="laravel" label="Laravel" />
</.select>

# With option groups
<.select id="stack" name="stack" value="phoenix" searchable>
  <.select_group label="Backend">
    <.select_option value="phoenix" label="Phoenix" />
    <.select_option value="rails" label="Rails" />
  </.select_group>
  <.select_separator />
  <.select_group label="Frontend">
    <.select_option value="react" label="React" />
    <.select_option value="vue" label="Vue" />
  </.select_group>
</.select>
```

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

### Configure Tailwind CSS v4 for Sutra UI

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/installation.md

In 'assets/css/app.css', add the '@source' directive to include Sutra UI's library files and import Sutra UI's component styles. This ensures Tailwind CSS scans Sutra UI's templates and applies its styles.

```css
@import "tailwindcss";

/* Add Sutra UI source paths for Tailwind to scan */
@source "../../deps/sutra_ui/lib";

/* Import Sutra UI component styles */
@import "../../deps/sutra_ui/priv/static/sutra_ui.css";

/* Your app's custom styles below... */
```

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

### Elixir LiveView Event Handler

Source: https://github.com/gurujada/sutra_ui/blob/master/usage_rules.md

Provides an example of a basic `handle_event/3` function in an Elixir LiveView. This is necessary to correctly process events triggered by component interactions, preventing LiveView disconnects.

```elixir
def handle_event("my_action", params, socket) do
  {:noreply, socket}
end
```

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

### Sutra UI Theme Customization (CSS)

Source: https://github.com/gurujada/sutra_ui/blob/master/README.md

Explains how to customize Sutra UI's theme using CSS custom properties. These overrides should be placed in 'app.css' after importing 'sutra_ui.css'. Examples include primary colors, destructive actions, and border radius.

```css
@import "../../deps/sutra_ui/priv/static/sutra_ui.css";

/* Custom theme overrides */
:root {
  /* Primary brand color (buttons, links, focus rings) */
  --primary: oklch(0.65 0.20 145);        /* Green */
  --primary-foreground: oklch(0.98 0 0);  /* White text on primary */

  /* Destructive actions (delete buttons, error states) */
  --destructive: oklch(0.55 0.25 30);     /* Red */

  /* Border radius */
  --radius: 0.5rem;
}

/* Dark mode overrides */
.dark {
  --primary: oklch(0.70 0.18 145);
  --destructive: oklch(0.65 0.22 25);
}
```

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

### OKLCH Color Format Explanation

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/theming.md

This CSS snippet illustrates the OKLCH color format used by Sutra UI. It breaks down the components: Lightness (L), Chroma (C), and Hue (H), explaining their ranges and perceptual uniformity benefits.

```css
--primary: oklch(0.623 0.214 259.815);
/*         oklch(L     C     H      )
           L = Lightness (0-1)
           C = Chroma (0-0.4, saturation)
           H = Hue (0-360, color wheel)
*/
```

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

### Per-Component CSS Customization (CSS)

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/theming.md

This CSS demonstrates how to customize individual components by overriding specific CSS variables. It shows how to apply fully rounded corners to buttons (`.btn`) and a larger radius to cards (`.card`) by redefining the `--radius` variable.

```css
/* Custom button styles */
.btn {
  --radius: 9999px;  /* Fully rounded buttons */
}

/* Custom card styles */
.card {
  --radius: 1rem;  /* Larger radius for cards */
}
```

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

### Import Sutra UI CSS and Override Theme Variables

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/theming.md

This snippet demonstrates how to import the Sutra UI CSS file and then override the default theme variables within the `:root` selector in your `app.css`. This allows for easy customization of colors, spacing, and other theme-related properties.

```css
@import "../../deps/sutra_ui/priv/static/sutra_ui.css";

/* Your theme overrides */
:root {
  --primary: oklch(0.65 0.20 145);
  --primary-foreground: oklch(0.98 0 0);
}
```

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

### Applying shadcn/ui Themes to Sutra UI

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/theming.md

This CSS snippet demonstrates how to integrate themes from shadcn/ui into Sutra UI. By importing the Sutra UI CSS and then pasting shadcn/ui's CSS variables, you can directly apply pre-designed themes, including dark mode variations.

```css
@import "../../deps/sutra_ui/priv/static/sutra_ui.css";

/* Paste shadcn theme here - it just works! */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --radius: 0.5rem;
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  /* ... dark mode variables */
}
```

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

### Match System Dark Mode Preference (JavaScript)

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/theming.md

This JavaScript snippet detects if the user's system is set to dark mode using the `prefers-color-scheme` media query. If dark mode is detected, it adds a 'dark' class to the document's root element, enabling dark mode styles.

```javascript
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark')
}
```

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

### Tabs with Dynamic Content using HEEx

Source: https://github.com/gurujada/sutra_ui/blob/master/usage_rules.md

Demonstrates how to create a tabbed interface where each tab displays different content, potentially dynamic. Includes panels for 'Overview', 'Activity', and 'Settings', with the settings panel using a simple form. Dependencies: HEEx.

```heex
<.tabs id="content-tabs" default_value="overview">
  <:tab value="overview">Overview</:tab>
  <:tab value="activity">Activity</:tab>
  <:tab value="settings">Settings</:tab>
  
  <:panel value="overview">
    <.card>
      <:header>
        <:title>Overview</:title>
      </:header>
      <:content>
        <p>Overview content here...</p>
      </:content>
    </.card>
  </:panel>
  
  <:panel value="activity">
    <.card>
      <:header>
        <:title>Recent Activity</:title>
      </:header>
      <:content>
        <ul>
          <.item :for={activity <- @activities}>
            {activity.description}
          </.item>
        </ul>
      </:content>
    </.card>
  </:panel>
  
  <:panel value="settings">
    <.simple_form for={@settings_form} phx-submit="save_settings">
      <.switch field={@settings_form[:notifications]} label="Enable notifications" />
      <.switch field={@settings_form[:dark_mode]} label="Dark mode" />
    </.simple_form>
  </:panel>
</.tabs>
```

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

### Import Sutra UI Components (Elixir)

Source: https://github.com/gurujada/sutra_ui/blob/master/README.md

No description

```elixir
defp html_helpers do
  quote do
    use SutraUIComponentsCoreComponents # Corrected import path
    # ... other imports
  end
end
```

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

### HEEX Form with Live Validation

Source: https://github.com/gurujada/sutra_ui/blob/master/usage_rules.md

Shows how to set up a `<.simple_form>` with `phx-change` and `phx-submit` attributes. `phx-change` is crucial for enabling live validation and ensuring form values are updated reactively.

```heex
<.simple_form for={@form} phx-change="validate" phx-submit="save">
```

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

### Basic Button Usage (HEEx)

Source: https://github.com/gurujada/sutra_ui/blob/master/README.md

Demonstrates how to render a basic button component using Sutra UI's HEEx syntax. The `.button` macro is used to generate the button element.

```heex
<.button>Click me</.button>
```

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

### CSS Class Naming Conventions

Source: https://github.com/gurujada/sutra_ui/blob/master/usage_rules.md

Demonstrates the standard CSS class naming conventions used in `sutra_ui.css` for components, variants, states, and sub-elements.

```css
/* Component base */
.component-name { }

/* Variants */
.component-name-variant { }

/* States */
.component-name-disabled { }
.component-name-active { }

/* Sub-elements */
.component-name-header { }
.component-name-content { }
.component-name-footer { }
```

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

### Sutra UI Theme Switcher Component

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/theming.md

This Heex snippet shows how to include the built-in theme switcher component in your application. This component provides a user-friendly interface for toggling between light, dark, and system themes.

```heex
<.theme_switcher />
```

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

### Use disabled attribute for Disabled States in HEEX

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/accessibility.md

For elements that are not interactive, use the `disabled` attribute. Relying solely on styling (like opacity or cursor changes) can be misleading to users. This example demonstrates the correct usage of the `disabled` attribute.

```heex
<!-- Good -->
<.button disabled>Cannot submit</.button>

<!-- Bad - looks disabled but isn't -->
<.button class="opacity-50 cursor-not-allowed">Cannot submit</.button>
```

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

### Phoenix Forms with Various Inputs

Source: https://context7.com/gurujada/sutra_ui/llms.txt

Demonstrates how to use the `<.simple_form>` component in Phoenix LiveView for creating forms with different input types like text, email, number, textarea, date, tel, search, and URL. It also shows how to configure accessibility attributes.

```elixir
<.simple_form for={@form} phx-change="validate" phx-submit="save">
  <.input field={@form[:name]} label="Full Name" />
  <.input field={@form[:email]} type="email" label="Email Address" />
  <.input field={@form[:age]} type="number" label="Age" min="0" max="120" />
  <.input
    field={@form[:bio]}
    type="textarea"
    label="Biography"
    placeholder="Tell us about yourself..."
  />
  <:actions>
    <.button type="submit">Save</.button>
  </:actions>
</.simple_form>

<.input type="date" name="birth_date" label="Birth Date" />
<.input type="tel" name="phone" label="Phone" />
<.input type="search" name="query" placeholder="Search..." autocomplete="off" />
<.input type="url" name="website" label="Website" />

<.input
  type="text"
  name="phone"
  aria-label="Phone number"
  aria-describedby="phone-help"
  aria-invalid={!@form[:phone].valid?}
/>
<span id="phone-help" class="text-sm text-muted-foreground">
  Include country code
</span>
```

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

### Tabs ARIA Pattern

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/accessibility.md

Provides an example of Sutra UI's 'tabs' component implementation, which follows the complete tablist, tab, and tabpanel ARIA pattern. This ensures proper keyboard navigation and screen reader support for tabbed interfaces.

```heex
<.tabs id="settings" default_value="account">
  <:tab value="account">Account</:tab>
  <:panel value="account">Account settings</:panel>
</.tabs>
<!-- Full tablist/tab/tabpanel ARIA pattern -->
```

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

### Modal Dialog with Form Recipe

Source: https://github.com/gurujada/sutra_ui/blob/master/usage_rules.md

Illustrates a common recipe for creating a modal dialog containing a form using Sutra UI components like `dialog`, `simple_form`, and `input`.

```heex
<.dialog id="edit-user-dialog">
  <:title>Edit User</:title>
  <:description>Update user information below.</:description>
  
  <.simple_form for={@form} phx-submit="save_user">
    <.input field={@form[:name]} label="Name" />
    <.input field={@form[:email]} label="Email" type="email" />
    
    <:actions>
      <.button variant="outline" phx-click={SutraUI.Dialog.hide_dialog("edit-user-dialog")}>
        Cancel
      </.button>
      <.button type="submit">Save Changes</.button>
    </:actions>
  </.simple_form>
</.dialog>

<.button phx-click={SutraUI.Dialog.show_dialog("edit-user-dialog")}>
  Edit User
</.button>
```

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

### Apply shadcn/ui Themes to Sutra UI

Source: https://github.com/gurujada/sutra_ui/blob/master/README.md

This CSS snippet demonstrates how to import Sutra UI's base styles and then apply custom theme variables, compatible with shadcn/ui themes, by defining them in the :root selector. It also includes a placeholder for dark mode variables.

```css
@import "../../deps/sutra_ui/priv/static/sutra_ui.css";

/* Paste your shadcn theme here - it just works! */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --radius: 0.5rem;
}

.dark {
  /* Dark mode variables from shadcn */
}

```

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

### JavaScript Hook Import for Sutra UI

Source: https://github.com/gurujada/sutra_ui/blob/master/usage_rules.md

Demonstrates how to import Sutra UI's colocated hooks into the main `app.js` file. This allows LiveView to recognize and utilize the hooks provided by Sutra UI components.

```javascript
// app.js
import { hooks as sutraUiHooks } from "phoenix-colocated/sutra_ui";

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: { ...sutraUiHooks }
})
```

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

### Table Component for Data Display

Source: https://context7.com/gurujada/sutra_ui/llms.txt

Demonstrates the `<.table>` component for rendering responsive tables. It shows a simple wrapper approach where the table structure and content are fully controlled, including headers, rows, and data cells with conditional styling for badges.

```elixir
# Simple wrapper - full control
<.table>
  <thead>
    <tr>
      <th>Invoice</th>
      <th>Status</th>
      <th class="text-right">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr :for={invoice <- @invoices}>
      <td>{invoice.number}</td>
      <td><.badge>{invoice.status}</.badge></td>
      <td class="text-right">{invoice.amount}</td>
    </tr>
  </tbody>
</.table>
```

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

### Define Dark Mode CSS Variables

Source: https://github.com/gurujada/sutra_ui/blob/master/guides/theming.md

This CSS defines the base color variables for the theme and then overrides them within the `.dark` class to provide a distinct dark mode appearance. It uses CSS custom properties (variables) for easy theming.

```css
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.1 0 0);
}

.dark {
  --background: oklch(0.1 0 0);
  --foreground: oklch(0.95 0 0);
}
```