### Start Salad UI Storybook for Development

Source: https://hexdocs.pm/salad_ui/index

These commands outline the steps to set up and run the Salad UI Storybook for local development. It involves cloning the repository, cloning the storybook repository in the same directory, and then starting the Phoenix server.

```bash
cd salad_storybook
mix phx.server
```

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

### Run Salad UI Unit Tests

Source: https://hexdocs.pm/salad_ui/index

This section provides commands for running unit tests for Salad UI. It includes installing dependencies with `mix deps.get`, running tests once with `mix test`, and continuously running tests with `mix test.watch`. It also mentions running only stale tests and the importance of code formatting with `mix format`.

```bash
mix deps.get
mix test
mix test.watch
mix test.watch --stale
mix format
```

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

### SaladUI Tabs Component Example

Source: https://hexdocs.pm/salad_ui/SaladUI

This code snippet demonstrates the implementation of the SaladUI Tabs component, including tabs, tabs_list, tabs_content, and tabs_trigger. It showcases how to set up different tab sections with unique content.

```html
<.tabs default="account" id="settings" :let={builder} class="w-[400px]">
  <.tabs_list class="grid w-full grid-cols-2">
    <.tabs_trigger builder={builder} value="account">account</.tabs_trigger>
    <.tabs_trigger builder={builder} value="password">password</.tabs_trigger>
  </.tabs_list>
  <.tabs_content value="account">
    <.card>
      <.card_content class="p-6">
        Account
      </.card_content>
    </.card>
  </.tabs_content>
  <.tabs_content value="password">
    <.card>
      <.card_content class="p-6">
        Password
      </.card_content>
    </.card>
  </.tabs_content>
</.tabs>
```

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

### Initialize Salad UI as a Library

Source: https://hexdocs.pm/salad_ui/index

This command initializes Salad UI in your project with the `--as-lib` option, which is useful if you primarily want to use Salad UI's components as a library without modifying its source code.

```bash
#> cd your_project
#> mix salad.init --as-lib
```

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

### Initialize Salad UI in Project

Source: https://hexdocs.pm/salad_ui/index

These commands show how to initialize Salad UI within your Elixir project. The `mix salad.init` command sets up the project, and `mix salad.add` can be used to add specific components.

```bash
#> cd your_project
#> mix salad.init

# install some components
#> mix salad.add label button
```

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

### Run Salad UI tests

Source: https://hexdocs.pm/salad_ui/readme

These commands are used to manage and run tests within the Salad UI project. It includes running tests once, watching for changes, and running only failing tests.

```bash
mix deps.get
mix test
mix test.watch
mix test.watch --stale
```

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

### Use Salad UI Button Component

Source: https://hexdocs.pm/salad_ui/index

This Elixir code demonstrates how to import and use the `Button` component from Salad UI within your project's modules. It shows the basic structure for rendering a button using HEEx syntax.

```elixir
defmodule MyModule do
    # import any component you need
    import SaladUI.Button

    def render(_) do
      ~H"""
      <.button>Click me</.button>
      """
    end
end
```

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

### Format code with mix format

Source: https://hexdocs.pm/salad_ui/readme

This command formats your Elixir code according to project standards, which is required before submitting pull requests.

```bash
mix format
```

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

### Add Salad UI Dependency to mix.exs

Source: https://hexdocs.pm/salad_ui/index

This snippet shows how to add the Salad UI package as a dependency in your Elixir project's `mix.exs` file. Ensure you specify the desired version.

```elixir
def deps do
  [
    {:salad_ui, "~> 0.14"},
  ]
end
```

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

### Use Salad UI Button component

Source: https://hexdocs.pm/salad_ui/readme

This Elixir code demonstrates how to import and use the `Button` component from Salad UI within a LiveView module.

```elixir
defmodule MyModule do
    # import any component you need
    import SaladUI.Button

    def render(_)
      ~H"""
      <.button>Click me</.button>
      """
    end
end
```

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

### Add TwMerge.Cache to application.ex

Source: https://hexdocs.pm/salad_ui/readme

This snippet demonstrates how to include `TwMerge.Cache` in the children list of your `application.ex` file for Salad UI integration.

```elixir
children = [
    ...
    TwMerge.Cache
]
```

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

### SaladUI Tabs Component

Source: https://hexdocs.pm/salad_ui/SaladUI

The Tabs component provides a tabbed interface, allowing users to switch between different content panels. It is based on the shadcn/ui tabs component.

```APIDOC
## SaladUI Tabs Component

### Description
Implementation of tabs components from https://ui.shadcn.com/docs/components/tabs.

### Components

#### `tabs`

##### Attributes
- **id** (`:string`) - Required - id for root tabs tag.
- **default** (`:string`) - Optional - default tab value. Defaults to `nil`.
- **class** (`:string`) - Optional - Defaults to `nil`.
- Global attributes are accepted.

##### Slots
- **inner_block** (required)

#### `tabs_list`

##### Attributes
- **class** (`:string`) - Optional - Defaults to `nil`.
- Global attributes are accepted.

##### Slots
- **inner_block** (required)

#### `tabs_trigger`

##### Attributes
- **builder** (`:map`) - Required - builder instance of tabs.
- **value** (`:string`) - Required - target value of tab content.
- **class** (`:string`) - Optional - Defaults to `nil`.
- Global attributes are accepted.

##### Slots
- **inner_block** (required)

#### `tabs_content`

##### Attributes
- **value** (`:string`) - Required - unique for tab content.
- **class** (`:string`) - Optional - Defaults to `nil`.
- Global attributes are accepted.

##### Slots
- **inner_block** (required)

### Example:
```elixir
<.tabs default="account" id="settings" :let={builder} class="w-[400px]">
  <.tabs_list class="grid w-full grid-cols-2">
    <.tabs_trigger builder={builder} value="account">account</.tabs_trigger>
    <.tabs_trigger builder={builder} value="password">password</.tabs_trigger>
  </.tabs_list>
  <.tabs_content value="account">
    <.card>
      <.card_content class="p-6">
        Account
      </.card_content>
    </.card>
  </.tabs_content>
  <.tabs_content value="password">
    <.card>
      <.card_content class="p-6">
        Password
      </.card_content>
    </.card>
  </.tabs_content>
</.tabs>
```
```

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

### Add TwMerge.Cache to application.ex

Source: https://hexdocs.pm/salad_ui/index

This code demonstrates how to include `TwMerge.Cache` in the list of children for your Elixir application's `application.ex` file. This is a necessary step for Salad UI's cache functionality.

```elixir
children = [
    ...,
    TwMerge.Cache
]
```

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

### Configure Salad UI Error Translator

Source: https://hexdocs.pm/salad_ui/index

This configuration snippet shows how to set a custom error translator function for Salad UI. You can specify a function within your project (e.g., `MyAppWeb.CoreComponents.translate_error`) to handle error translations.

```elixir
config :salad_ui, :error_translator_function, {MyAppWeb.CoreComponents, :translate_error}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.