Moduix

https://moduix.dev/docs
Admin
Moduix is a multi-framework component system built on Ark UI with shadcn-compatible registries,...
Tokens:901,238
Snippets:4,990
Trust Score:3
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Install React QrCode with shadcn (npm, yarn, pnpm, bun, deno)

Source: https://moduix.dev/docs/qr-code

Install the React QrCode component with shadcn. Use the command for your package manager. See Quick Start for full package setup, registry configuration, and styling guidance.

```bash
npx shadcn@latest add @moduix-react/qr-code
```

```bash
yarn dlx shadcn@latest add @moduix-react/qr-code
```

```bash
pnpm dlx shadcn@latest add @moduix-react/qr-code
```

```bash
bunx shadcn@latest add @moduix-react/qr-code
```

```bash
deno run -A npm:shadcn@latest add @moduix-react/qr-code
```

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

### Download QR Code Example (Solid)

Source: https://moduix.dev/docs/qr-code

Solid example showing how to add a download trigger with fileName and mimeType to save the QR code as a PNG image.

```jsx
import { QrCode } from '@moduix/solid/qr-code';

export default function DownloadQrCodeDemo() {
  return (
    <QrCode defaultValue="https://moduix.dev/docs/qr-code">
      <QrCode.Frame role="img" aria-label="QR code for moduix QR Code documentation">
        <QrCode.Pattern />
      </QrCode.Frame>
      <QrCode.DownloadTrigger fileName="moduix-qr-code.png" mimeType="image/png">
        Download QR code (PNG)
      </QrCode.DownloadTrigger>
    </QrCode>
  );
}
```

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

### Install @moduix-solid-tailwind/alert with shadcn (Tailwind CSS)

Source: https://moduix.dev/docs/alert

Install the Solid alert component with shadcn using Tailwind CSS. See Quick Start for full package setup and registry configuration.

```bash
npx shadcn@latest add @moduix-solid-tailwind/alert

```

```bash
yarn dlx shadcn@latest add @moduix-solid-tailwind/alert

```

```bash
pnpm dlx shadcn@latest add @moduix-solid-tailwind/alert

```

```bash
bunx shadcn@latest add @moduix-solid-tailwind/alert

```

```bash
deno run -A npm:shadcn@latest add @moduix-solid-tailwind/alert

```

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

### Install @moduix-react-tailwind/alert with shadcn (Tailwind CSS)

Source: https://moduix.dev/docs/alert

Install the React alert component with shadcn using Tailwind CSS. See Quick Start for full package setup and registry configuration.

```bash
npx shadcn@latest add @moduix-react-tailwind/alert

```

```bash
yarn dlx shadcn@latest add @moduix-react-tailwind/alert

```

```bash
pnpm dlx shadcn@latest add @moduix-react-tailwind/alert

```

```bash
bunx shadcn@latest add @moduix-react-tailwind/alert

```

```bash
deno run -A npm:shadcn@latest add @moduix-react-tailwind/alert

```

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

### Install Solid Pagination with deno

Source: https://moduix.dev/docs/pagination?page=1

Install the Solid Pagination component using deno.

```bash
deno run -A npm:shadcn@latest add @moduix-solid/pagination
```

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

### Basic EnvironmentProvider setup for React and Solid

Source: https://moduix.dev/docs/environment

Basic setup wrapping a subtree with EnvironmentProvider and using useEnvironmentContext to resolve the root node, document, and window. In Solid, useEnvironmentContext() returns an accessor, so call it before reading getRootNode, getDocument, or getWindow.

```tsx
import { EnvironmentProvider, useEnvironmentContext } from '@ark-ui/react/environment';
import { Card } from '@moduix/react/card';
import { Stack } from '@moduix/react/stack';
import { useEffect, useState } from 'react';

interface EnvironmentDetails {
  documentName: string;
  rootNode: string;
  windowHost: string;
}

function EnvironmentSummary() {
  const { getDocument, getRootNode, getWindow } = useEnvironmentContext();
  const [details, setDetails] = useState<EnvironmentDetails>({
    documentName: 'Detecting…',
    rootNode: 'Detecting…',
    windowHost: 'Detecting…',
  });

  useEffect(() => {
    const rootNode = getRootNode();
    const rootName =
      rootNode.nodeType === Node.DOCUMENT_NODE
        ? 'Document'
        : rootNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
          ? 'Shadow root'
          : rootNode.nodeName;

    setDetails({
      rootNode: rootName,
      documentName: getDocument().title || 'Untitled document',
      windowHost: getWindow().location.hostname || 'Local preview',
    });
  }, [getDocument, getRootNode, getWindow]);

  return (
    <Card>
      <Card.Header>
        <Card.Title>Resolved environment</Card.Title>
        <Card.Description>Ark queries DOM APIs from this environment.</Card.Description>
      </Card.Header>
      <Card.Body>
        <Stack gap={2}>
          <span>Root node: {details.rootNode}</span>
          <span>Document: {details.documentName}</span>
          <span>Window: {details.windowHost}</span>
        </Stack>
      </Card.Body>
    </Card>
  );
}

export default function EnvironmentBasicDemo() {
  return (
    <EnvironmentProvider>
      <EnvironmentSummary />
    </EnvironmentProvider>
  );
}
```

```tsx
import { EnvironmentProvider, useEnvironmentContext } from '@ark-ui/solid/environment';
import { Card } from '@moduix/solid/card';
import { Stack } from '@moduix/solid/stack';
import { createEffect, createSignal } from 'solid-js';

interface EnvironmentDetails {
  documentName: string;
  rootNode: string;
  windowHost: string;
}

function EnvironmentSummary() {
  const environment = useEnvironmentContext();
  const [details, setDetails] = createSignal<EnvironmentDetails>({
    documentName: 'Detecting…',
    rootNode: 'Detecting…',
    windowHost: 'Detecting…',
  });

  createEffect(() => {
    const { getDocument, getRootNode, getWindow } = environment();
    const rootNode = getRootNode();
    const rootName =
      rootNode.nodeType === Node.DOCUMENT_NODE
        ? 'Document'
        : rootNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
          ? 'Shadow root'
          : rootNode.nodeName;

    setDetails({
      rootNode: rootName,
      documentName: getDocument().title || 'Untitled document',
      windowHost: getWindow().location.hostname || 'Local preview',
    });
  });

  return (
    <Card>
      <Card.Header>
        <Card.Title>Resolved environment</Card.Title>
        <Card.Description>Ark queries DOM APIs from this environment.</Card.Description>
      </Card.Header>
      <Card.Body>
        <Stack gap={2}>
          <span>Root node: {details().rootNode}</span>
          <span>Document: {details().documentName}</span>
          <span>Window: {details().windowHost}</span>
        </Stack>
      </Card.Body>
    </Card>
  );
}

export default function EnvironmentBasicDemo() {
  return (
    <EnvironmentProvider>
      <EnvironmentSummary />
    </EnvironmentProvider>
  );
}
```

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

### Install @moduix-solid/alert with shadcn

Source: https://moduix.dev/docs/alert

Install the Solid alert component with shadcn using npm, yarn, pnpm, bun, or deno. See Quick Start for full package setup and registry configuration.

```bash
npx shadcn@latest add @moduix-solid/alert

```

```bash
yarn dlx shadcn@latest add @moduix-solid/alert

```

```bash
pnpm dlx shadcn@latest add @moduix-solid/alert

```

```bash
bunx shadcn@latest add @moduix-solid/alert

```

```bash
deno run -A npm:shadcn@latest add @moduix-solid/alert

```

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

### Install @moduix-react/alert with shadcn

Source: https://moduix.dev/docs/alert

Install the React alert component with shadcn using npm, yarn, pnpm, bun, or deno. See Quick Start for full package setup and registry configuration.

```bash
npx shadcn@latest add @moduix-react/alert

```

```bash
yarn dlx shadcn@latest add @moduix-react/alert

```

```bash
pnpm dlx shadcn@latest add @moduix-react/alert

```

```bash
bunx shadcn@latest add @moduix-react/alert

```

```bash
deno run -A npm:shadcn@latest add @moduix-react/alert

```

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

### Install Solid Pagination with bun

Source: https://moduix.dev/docs/pagination?page=1

Install the Solid Pagination component using bun.

```bash
bunx shadcn@latest add @moduix-solid/pagination
```

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

### Solid RootProvider Implementation

Source: https://moduix.dev/docs/steps

Demonstrates the SolidJS implementation of a multi-step workflow using Steps.RootProvider.

```tsx
import { Steps } from '@moduix/solid/steps';
import styles from '@/components/examples/steps/steps-root-provider.module.css';

const items = [
  {
    title: 'Account',
    description: 'Create the workspace owner account.',
  },
  {
    title: 'Profile',
    description: 'Set team details and locale.',
  },
  {
    title: 'Billing',
    description: 'Choose the plan and payment method.',
  },
];

export default function RootProviderStepsDemo() {
  const steps = Steps.useSteps({ count: items.length });

  return (
    <>
      <Steps.RootProvider class={styles.root} value={steps}>
        <Steps.List>
          {items.map((item, index) => (
            <Steps.Item index={index}>
              <Steps.Trigger>
                <Steps.Indicator />
                <span class={styles.label}>
                  <strong>{item.title}</strong>
                  <small class={styles.description}>{item.description}</small>
                </span>
              </Steps.Trigger>
              <Steps.Separator />
            </Steps.Item>
          ))}
        </Steps.List>

        {items.map((item, index) => (
          <Steps.Content index={index}>
            {item.title} - {item.description}
          </Steps.Content>
        ))}

        <Steps.CompletedContent>Steps complete. The workspace is ready.</Steps.CompletedContent>

        <div class={styles.actions}>
          <Steps.PrevTrigger>Back</Steps.PrevTrigger>
          <Steps.NextTrigger>Next</Steps.NextTrigger>
        </div>
      </Steps.RootProvider>
      <output>Current step: {steps().value + 1}</output>
    </>
  );
}
```

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

### Install @tanstack/solid-form with deno

Source: https://moduix.dev/docs/tanstack-form

Install the Solid adapter for TanStack Form using deno.

```bash
deno add npm:@tanstack/solid-form
```

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

### Install @moduix/solid and @ark-ui/solid (CSS Modules)

Source: https://moduix.dev/docs/quick-start

Install the CSS Modules setup for Solid. Use one of these commands. The install adds the moduix package and the Ark UI runtime package.

```shell
npm install @moduix/solid @ark-ui/solid

```

```shell
yarn add @moduix/solid @ark-ui/solid

```

```shell
pnpm add @moduix/solid @ark-ui/solid

```

```shell
bun add @moduix/solid @ark-ui/solid

```

```shell
deno add npm:@moduix/solid npm:@ark-ui/solid

```

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

### Install @moduix-solid/segment-group with shadcn

Source: https://moduix.dev/docs/segment-group

Install the Solid segment-group component with shadcn using your preferred package manager. The same package is used for both the default and CSS Modules setups.

```bash
npx shadcn@latest add @moduix-solid/segment-group
```

```bash
yarn dlx shadcn@latest add @moduix-solid/segment-group
```

```bash
pnpm dlx shadcn@latest add @moduix-solid/segment-group
```

```bash
bunx shadcn@latest add @moduix-solid/segment-group
```

```bash
deno run -A npm:shadcn@latest add @moduix-solid/segment-group
```

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

### Install Solid Pagination with npm

Source: https://moduix.dev/docs/pagination?page=1

Install the Solid Pagination component using npm.

```bash
npx shadcn@latest add @moduix-solid/pagination
```

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

### Install @moduix-react/segment-group with shadcn

Source: https://moduix.dev/docs/segment-group

Install the React segment-group component with shadcn using your preferred package manager. The same package is used for both the default and CSS Modules setups.

```bash
npx shadcn@latest add @moduix-react/segment-group
```

```bash
yarn dlx shadcn@latest add @moduix-react/segment-group
```

```bash
pnpm dlx shadcn@latest add @moduix-react/segment-group
```

```bash
bunx shadcn@latest add @moduix-react/segment-group
```

```bash
deno run -A npm:shadcn@latest add @moduix-react/segment-group
```

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

### Install Solid QrCode with shadcn (npm, yarn, pnpm, bun, deno)

Source: https://moduix.dev/docs/qr-code

Install the Solid QrCode component with shadcn. Use the command for your package manager.

```bash
npx shadcn@latest add @moduix-solid/qr-code
```

```bash
yarn dlx shadcn@latest add @moduix-solid/qr-code
```

```bash
pnpm dlx shadcn@latest add @moduix-solid/qr-code
```

```bash
bunx shadcn@latest add @moduix-solid/qr-code
```

```bash
deno run -A npm:shadcn@latest add @moduix-solid/qr-code
```

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

### Solid: RootProvider with useFileUpload and paste handling

Source: https://moduix.dev/docs/file-upload

Solid version of the same example. Uses `useFileUpload` with `RootProvider` and `setClipboardFiles` to handle pasted files. Requires `@moduix/solid/file-upload` and `@moduix/solid/textarea`.

```tsx
import { FileUpload, useFileUpload } from '@moduix/solid/file-upload';
import { Textarea } from '@moduix/solid/textarea';
import { For } from 'solid-js';
import styles from '@/components/examples/file-upload/file-upload-root-provider-and-paste.module.css';

const maxFiles = 3;
const accept = 'image/*';

export default function RootProviderPasteUploadDemo() {
  const fileUpload = useFileUpload({
    maxFiles,
    accept,
  });

  return (
    <FileUpload.RootProvider class={styles.root} value={fileUpload}>
      <FileUpload.Label>Images</FileUpload.Label>
      <Textarea
        placeholder="Paste an image here"
        onPaste={(event) => fileUpload().setClipboardFiles(event.clipboardData)}
      />
      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {(context) => (
            <For each={context().acceptedFiles}>
              {(file) => (
                <FileUpload.Item file={file}>
                  <FileUpload.ItemName />
                  <FileUpload.ItemDeleteTrigger aria-label={`Remove ${file.name}`} />
                </FileUpload.Item>
              )}
            </For>
          )}
        </FileUpload.Context>
      </FileUpload.ItemGroup>
      <FileUpload.HiddenInput />
    </FileUpload.RootProvider>
  );
}
```

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

### Install @moduix-solid/floating-panel with shadcn

Source: https://moduix.dev/docs/floating-panel

Install the Solid floating-panel component with shadcn using your preferred package manager. The same command works for both CSS Modules and Tailwind CSS setups.

```bash
npx shadcn@latest add @moduix-solid/floating-panel
```

```bash
yarn dlx shadcn@latest add @moduix-solid/floating-panel
```

```bash
pnpm dlx shadcn@latest add @moduix-solid/floating-panel
```

```bash
bunx shadcn@latest add @moduix-solid/floating-panel
```

```bash
deno run -A npm:shadcn@latest add @moduix-solid/floating-panel
```

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

### Install @moduix-react/floating-panel with shadcn

Source: https://moduix.dev/docs/floating-panel

Install the React floating-panel component with shadcn using your preferred package manager. The same command works for both CSS Modules and Tailwind CSS setups.

```bash
npx shadcn@latest add @moduix-react/floating-panel
```

```bash
yarn dlx shadcn@latest add @moduix-react/floating-panel
```

```bash
pnpm dlx shadcn@latest add @moduix-react/floating-panel
```

```bash
bunx shadcn@latest add @moduix-react/floating-panel
```

```bash
deno run -A npm:shadcn@latest add @moduix-react/floating-panel
```

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

### Install with shadcn for Solid (bun)

Source: https://moduix.dev/docs/checkbox

Install the Solid checkbox component using bun.

```bash
bunx shadcn@latest add @moduix-solid/checkbox
```

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

### Install @moduix-solid/stack with shadcn

Source: https://moduix.dev/docs/stack

Install the Solid stack component using shadcn CLI with package managers npm, yarn, pnpm, bun, and deno. This default setup is used for Solid projects.

```shell
npx shadcn@latest add @moduix-solid/stack

```

```shell
yarn dlx shadcn@latest add @moduix-solid/stack

```

```shell
pnpm dlx shadcn@latest add @moduix-solid/stack

```

```shell
bunx shadcn@latest add @moduix-solid/stack

```

```shell
deno run -A npm:shadcn@latest add @moduix-solid/stack

```

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

### Install with shadcn for Solid (deno)

Source: https://moduix.dev/docs/checkbox

Install the Solid checkbox component using deno.

```bash
deno run -A npm:shadcn@latest add @moduix-solid/checkbox
```

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

### Install @moduix-react/stack with shadcn

Source: https://moduix.dev/docs/stack

Install the React stack component using shadcn CLI with package managers npm, yarn, pnpm, bun, and deno. This default setup is used for React projects.

```shell
npx shadcn@latest add @moduix-react/stack

```

```shell
yarn dlx shadcn@latest add @moduix-react/stack

```

```shell
pnpm dlx shadcn@latest add @moduix-react/stack

```

```shell
bunx shadcn@latest add @moduix-react/stack

```

```shell
deno run -A npm:shadcn@latest add @moduix-react/stack

```

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

### Install Solid tour with shadcn (default)

Source: https://moduix.dev/docs/tour

Install the Solid tour component using the shadcn CLI. Choose the command for your package manager: npm, yarn, pnpm, bun, or deno. This is the default styling variant.

```bash
npx shadcn@latest add @moduix-solid/tour
```

```bash
yarn dlx shadcn@latest add @moduix-solid/tour
```

```bash
pnpm dlx shadcn@latest add @moduix-solid/tour
```

```bash
bunx shadcn@latest add @moduix-solid/tour
```

```bash
deno run -A npm:shadcn@latest add @moduix-solid/tour
```

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

### Install Moduix Solid Listbox with shadcn

Source: https://moduix.dev/docs/listbox

Commands to add the @moduix-solid/listbox component to a shadcn setup. Run the command for your package manager.

```shell
npx shadcn@latest add @moduix-solid/listbox
```

```shell
yarn dlx shadcn@latest add @moduix-solid/listbox
```

```shell
pnpm dlx shadcn@latest add @moduix-solid/listbox
```

```shell
bunx shadcn@latest add @moduix-solid/listbox
```

```shell
deno run -A npm:shadcn@latest add @moduix-solid/listbox
```

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

### Styles for input sizes example

Source: https://moduix.dev/docs/input

CSS for the input sizes example, using a grid layout with spacing and a max width.

```css
.root {
  display: grid;
  gap: var(--moduix-spacing-3);
  inline-size: min(100%, 24rem);
}
```

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

### Download QR Code Example (React)

Source: https://moduix.dev/docs/qr-code

React example showing how to add a download trigger with fileName and mimeType to save the QR code as a PNG image.

```jsx
import { QrCode } from '@moduix/react/qr-code';

export default function DownloadQrCodeDemo() {
  return (
    <QrCode defaultValue="https://moduix.dev/docs/qr-code">
      <QrCode.Frame role="img" aria-label="QR code for moduix QR Code documentation">
        <QrCode.Pattern />
      </QrCode.Frame>
      <QrCode.DownloadTrigger fileName="moduix-qr-code.png" mimeType="image/png">
        Download QR code (PNG)
      </QrCode.DownloadTrigger>
    </QrCode>
  );
}
```

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

### Initial Checked Switch (Solid)

Source: https://moduix.dev/docs/switch

Use defaultChecked to start the switch enabled and let it manage its own state. This example imports Switch from '@moduix/solid/switch'.

```jsx
import { Switch } from '@moduix/solid/switch';

export default function InitialCheckedSwitchDemo() {
  return (
    <Switch defaultChecked>
      <Switch.Control />
      <Switch.Label>Start enabled</Switch.Label>
      <Switch.HiddenInput />
    </Switch>
  );
}

```

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

### Install @moduix-solid/typeset with shadcn (deno)

Source: https://moduix.dev/docs/typeset

Install the Typeset component for Solid using the shadcn CLI with deno.

```bash
deno run -A npm:shadcn@latest add @moduix-solid/typeset
```

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

### Initial Checked Switch (React)

Source: https://moduix.dev/docs/switch

Use defaultChecked to start the switch enabled and let it manage its own state. This example imports Switch from '@moduix/react/switch'.

```jsx
import { Switch } from '@moduix/react/switch';

export default function InitialCheckedSwitchDemo() {
  return (
    <Switch defaultChecked>
      <Switch.Control />
      <Switch.Label>Start enabled</Switch.Label>
      <Switch.HiddenInput />
    </Switch>
  );
}

```

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

### Install Moduix React Listbox with shadcn

Source: https://moduix.dev/docs/listbox

Commands to add the @moduix-react/listbox component to a shadcn setup. Run the command for your package manager inside the project root.

```shell
npx shadcn@latest add @moduix-react/listbox
```

```shell
yarn dlx shadcn@latest add @moduix-react/listbox
```

```shell
pnpm dlx shadcn@latest add @moduix-react/listbox
```

```shell
bunx shadcn@latest add @moduix-react/listbox
```

```shell
deno run -A npm:shadcn@latest add @moduix-react/listbox
```

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

### Styles for RootProvider examples (CSS module)

Source: https://moduix.dev/docs/pagination?page=1

CSS module for the RootProvider examples. .root makes the pagination container a flex row sized to its content; .stack lays out the button and pagination vertically with the standard spacing token.

```css
.root {
  display: flex;
  width: fit-content;
}

.stack {
  display: grid;
  gap: var(--moduix-spacing-3);
  justify-items: start;
}

```

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

### Install @moduix-solid/password-input with deno

Source: https://moduix.dev/docs/password-input

Installs the Solid Password Input component using deno.

```bash
deno run -A npm:shadcn@latest add @moduix-solid/password-input
```

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

### Render an ordered list with as="ol" and start prop

Source: https://moduix.dev/docs/list

Use `as="ol"` to render an ordered list while keeping the moduix root styling. Native props such as `start`, `reversed`, and `type` are forwarded to the ordered-list root. The example sets `start={3}` to begin numbering at 3.

```jsx
import { List } from '@moduix/react/list';

export default function OrderedListDemo() {
  return (
    <List as="ol" start={3}>
      <List.Item>Prepare the release notes.</List.Item>
      <List.Item>Publish the package.</List.Item>
      <List.Item>Announce the release.</List.Item>
    </List>
  );
}

```

```jsx
import { List } from '@moduix/solid/list';

export default function OrderedListDemo() {
  return (
    <List as="ol" start={3}>
      <List.Item>Prepare the release notes.</List.Item>
      <List.Item>Publish the package.</List.Item>
      <List.Item>Announce the release.</List.Item>
    </List>
  );
}

```

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

### Read locale context with useLocaleContext in React

Source: https://moduix.dev/docs/locale

Use useLocaleContext to get locale and dir from the nearest provider. The example applies dir and lang attributes to a section and displays the locale and direction.

```tsx
import { LocaleProvider, useLocaleContext } from '@ark-ui/react/locale';

function LocaleDetails() {
  const { dir, locale } = useLocaleContext();

  return (
    <section aria-labelledby="locale-heading" dir={dir} lang="ar">
      <h2 id="locale-heading">إعدادات الحساب</h2>
      <p>
        {locale} · {dir}
      </p>
      <p>تُستخدم اللغة والاتجاه نفسيهما في هذه المساحة.</p>
      <button type="button">حفظ التغييرات</button>
    </section>
  );
}

export default function LocaleContextDemo() {
  return (
    <LocaleProvider locale="ar-EG">
      <LocaleDetails />
    </LocaleProvider>
  );
}
```

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

### Install Solid KBD with shadcn (default)

Source: https://moduix.dev/docs/kbd

Install the Solid KBD component with shadcn using the default styling. Choose the command for your package manager: npm, yarn, pnpm, bun, or deno.

```bash
npx shadcn@latest add @moduix-solid/kbd
```

```bash
yarn dlx shadcn@latest add @moduix-solid/kbd
```

```bash
pnpm dlx shadcn@latest add @moduix-solid/kbd
```

```bash
bunx shadcn@latest add @moduix-solid/kbd
```

```bash
deno run -A npm:shadcn@latest add @moduix-solid/kbd
```

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

### Solid useTimer RootProvider Example

Source: https://moduix.dev/docs/timer

Use this Solid example to access timer state and methods outside the rendered part tree with useTimer. It renders a timer with custom unit labels (hours, minutes, seconds) and control buttons (Start, Pause, Reset), and displays the progress percentage. The timer is configured with a target of 60 minutes.

```jsx
import { Timer, useTimer } from '@moduix/solid/timer';
import { Pause as PauseIcon, Play as PlayIcon, RotateCcw as RotateCcwIcon } from 'lucide-solid';
import styles from '@/components/examples/timer/timer-root-provider.module.css';

export default function RootProviderTimerDemo() {
  const timer = useTimer({
    targetMs: 60 * 60 * 1000,
  });

  return (
    <>
      <Timer.RootProvider value={timer}>
        <Timer.Area>
          <span class={styles.itemGroup}>
            <Timer.Item type="hours" />
            <span class={styles.itemLabel}>hours</span>
          </span>
          <Timer.Separator>:</Timer.Separator>
          <span class={styles.itemGroup}>
            <Timer.Item type="minutes" />
            <span class={styles.itemLabel}>minutes</span>
          </span>
          <Timer.Separator>:</Timer.Separator>
          <span class={styles.itemGroup}>
            <Timer.Item type="seconds" />
            <span class={styles.itemLabel}>seconds</span>
          </span>
        </Timer.Area>
        <Timer.Control>
          <Timer.ActionTrigger action="start">
            <PlayIcon /> Start
          </Timer.ActionTrigger>
          <Timer.ActionTrigger action="pause">
            <PauseIcon /> Pause
          </Timer.ActionTrigger>
          <Timer.ActionTrigger action="reset">
            <RotateCcwIcon /> Reset
          </Timer.ActionTrigger>
        </Timer.Control>
      </Timer.RootProvider>
      <output>Progress: {(timer.progressPercent * 100).toFixed(0)}%</output>
    </>
  );
}
```

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

### Install Solid Pagination with yarn

Source: https://moduix.dev/docs/pagination?page=1

Install the Solid Pagination component using yarn.

```bash
yarn dlx shadcn@latest add @moduix-solid/pagination
```

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

### Install @moduix-solid/input with deno

Source: https://moduix.dev/docs/input

Use deno to install the Solid Input component with shadcn.

```bash
deno run -A npm:shadcn@latest add @moduix-solid/input
```

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

### React useTimer RootProvider Example

Source: https://moduix.dev/docs/timer

Use this React example to access timer state and methods outside the rendered part tree with useTimer. It renders a timer with custom unit labels (hours, minutes, seconds) and control buttons (Start, Pause, Reset), and displays the progress percentage. The timer is configured with a target of 60 minutes.

```jsx
import { Timer, useTimer } from '@moduix/react/timer';
import { Pause as PauseIcon, Play as PlayIcon, RotateCcw as RotateCcwIcon } from 'lucide-react';
import { PreviewMeta } from '@/components/mdx/Components';
import styles from '@/components/examples/timer/timer-root-provider.module.css';

export default function RootProviderTimerDemo() {
  const timer = useTimer({
    targetMs: 60 * 60 * 1000,
  });
  return (
    <>
      <Timer.RootProvider value={timer}>
        <Timer.Area>
          <span className={styles.itemGroup}>
            <Timer.Item type="hours" />
            <span className={styles.itemLabel}>hours</span>
          </span>
          <Timer.Separator>:</Timer.Separator>
          <span className={styles.itemGroup}>
            <Timer.Item type="minutes" />
            <span className={styles.itemLabel}>minutes</span>
          </span>
          <Timer.Separator>:</Timer.Separator>
          <span className={styles.itemGroup}>
            <Timer.Item type="seconds" />
            <span className={styles.itemLabel}>seconds</span>
          </span>
        </Timer.Area>
        <Timer.Control>
          <Timer.ActionTrigger action="start">
            <PlayIcon /> Start
          </Timer.ActionTrigger>
          <Timer.ActionTrigger action="pause">
            <PauseIcon /> Pause
          </Timer.ActionTrigger>
          <Timer.ActionTrigger action="reset">
            <RotateCcwIcon /> Reset
          </Timer.ActionTrigger>
        </Timer.Control>
      </Timer.RootProvider>
      <PreviewMeta>
        <output>Progress: {(timer.progressPercent * 100).toFixed(0)}%</output>
      </PreviewMeta>
    </>
  );
}
```

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

### Install @tanstack/solid-form with bun

Source: https://moduix.dev/docs/tanstack-form

Install the Solid adapter for TanStack Form using bun.

```bash
bun add @tanstack/solid-form
```

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

### Disabled AngleSlider (React)

Source: https://moduix.dev/docs/angle-slider

A disabled AngleSlider example for React, setting the disabled prop to prevent interaction and exclude from focus. Starts with a default value of 45 degrees and includes marker values.

```jsx
import { AngleSlider } from '@moduix/react/angle-slider';
import styles from '@/components/examples/angle-slider/angle-slider-disabled.module.css';

const initialValue = 45;
const markerValues = [0, 45, 90, 135, 180, 225, 270, 315];

export default function DisabledAngleSliderDemo() {
  return (
    <AngleSlider
      defaultValue={initialValue}
      disabled
      aria-label="Disabled rotation"
      className={styles.root}
    >
      <AngleSlider.Label>Rotation</AngleSlider.Label>
      <AngleSlider.Dial>
        <AngleSlider.Marks values={markerValues} />
      </AngleSlider.Dial>
      <AngleSlider.HiddenInput />
    </AngleSlider>
  );
}

```

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

### Install @moduix-solid/image (deno)

Source: https://moduix.dev/docs/image

Default Solid package installation command for deno.

```bash
deno run -A npm:shadcn@latest add @moduix-solid/image
```

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

### Basic JsonTreeView usage in React

Source: https://moduix.dev/docs/json-tree-view

Pass a JavaScript value to the data prop and render <JsonTreeView.Tree /> inside the component. Use defaultExpandedDepth to control initial expansion. This example starts with two levels expanded.

```jsx
import { JsonTreeView } from '@moduix/react/json-tree-view';

const deployment = {
  environment: 'production',
  release: {
    branch: 'main',
    commit: '0f4c9d7',
    status: 'ready',
  },
  services: ['docs', 'registry', 'website'],
};

export default function JsonTreeViewBasicDemo() {
  return (
    <JsonTreeView data={deployment} defaultExpandedDepth={2}>
      <JsonTreeView.Tree />
    </JsonTreeView>
  );
}
```

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

### Dynamic carousel with add slide button

Source: https://moduix.dev/docs/carousel

Dynamic carousel example for @moduix/solid. The component starts with 4 slides and adds more on button click, using createSignal and For. The styles use CSS modules with Moduix design tokens.

```tsx
import { Button } from '@moduix/solid/button';
import { Carousel } from '@moduix/solid/carousel';
import { createSignal, For } from 'solid-js';
import styles from '@/components/examples/carousel/carousel-dynamic.module.css';

const slides = [
  {
    id: 'fjord',
    src: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1280&q=80',
    alt: 'A lakeside landscape with mountains and warm sunset light.',
  },
  {
    id: 'coast',
    src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1280&q=80',
    alt: 'Ocean waves rolling onto a sandy beach.',
  },
  {
    id: 'village',
    src: 'https://images.unsplash.com/photo-1516483638261-f4dbaf036963?auto=format&fit=crop&w=1280&q=80',
    alt: 'A colorful hillside town on the coast.',
  },
  {
    id: 'forest',
    src: 'https://images.unsplash.com/photo-1478436127897-769e1b3f0f36?auto=format&fit=crop&w=1280&q=80',
    alt: 'A misty green forest with tall trees.',
  },
  {
    id: 'desert',
    src: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1280&q=80',
    alt: 'Golden sand dunes under a bright sky.',
  },
];

export default function DynamicSlidesCarousel() {
  const [visibleSlides, setVisibleSlides] = createSignal(slides.slice(0, 4));
  const [page, setPage] = createSignal(0);

  const addSlide = () => {
    setVisibleSlides((currentSlides) => {
      const template = slides[currentSlides.length % slides.length];

      return [
        ...currentSlides,
        {
          ...template,
          id: `${template.id}-${currentSlides.length}`,
        },
      ];
    });
  };

  return (
    <div class={styles.stack}>
      <Carousel
        class={styles.root}
        aria-label="Dynamic gallery"
        slideCount={visibleSlides().length}
        page={page()}
        onPageChange={(details) => setPage(details.page)}
      >
        <Carousel.ItemGroup class={styles.itemGroup} aria-label="Dynamic gallery">
          <For each={visibleSlides()}>
            {(slide, index) => (
              <Carousel.Item index={index()}>
                <img class={styles.image} src={slide.src} alt={slide.alt} />
              </Carousel.Item>
            )}
          </For>
        </Carousel.ItemGroup>
        <Carousel.Control class={styles.control}>
          <Carousel.PrevTrigger />
          <Carousel.Indicators />
          <Carousel.NextTrigger />
        </Carousel.Control>
      </Carousel>

      <div>
        <output>Slides: {visibleSlides().length}</output>
        <Button size="sm" variant="outline" onClick={addSlide}>
          Add slide
        </Button>
      </div>
    </div>
  );
}
```

```css
.root {
  inline-size: min(32rem, 100%);
}

.stack {
  display: grid;
  inline-size: 100%;
  gap: var(--moduix-spacing-3);
  justify-items: center;
}

.itemGroup {
  border-radius: var(--moduix-radius-xl);
}

.control {
  justify-content: center;
}

.image {
  display: block;
  inline-size: 100%;
  block-size: 21rem;
  object-fit: cover;
  border-radius: var(--moduix-radius-xl);
}
```

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

### Install @moduix-solid/typeset with shadcn (bun)

Source: https://moduix.dev/docs/typeset

Install the Typeset component for Solid using the shadcn CLI with bun.

```bash
bunx shadcn@latest add @moduix-solid/typeset
```

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

### Read locale context with useLocaleContext in Solid

Source: https://moduix.dev/docs/locale

Use useLocaleContext to get locale and dir from the nearest provider. In Solid, the context is an accessor, so you call it to read the values. The example applies dir and lang attributes to a section and displays the locale and direction.

```tsx
import { LocaleProvider, useLocaleContext } from '@ark-ui/solid/locale';

function LocaleDetails() {
  const locale = useLocaleContext();

  return (
    <section aria-labelledby="locale-heading" dir={locale().dir} lang="ar">
      <h2 id="locale-heading">إعدادات الحساب</h2>
      <p>
        {locale().locale} · {locale().dir}
      </p>
      <p>تُستخدم اللغة والاتجاه نفسيهما في هذه المساحة.</p>
      <button type="button">حفظ التغييرات</button>
    </section>
  );
}

export default function LocaleContextDemo() {
  return (
    <LocaleProvider locale="ar-EG">
      <LocaleDetails />
    </LocaleProvider>
  );
}
```

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

### Install @moduix-solid-tailwind/image with Tailwind CSS (deno)

Source: https://moduix.dev/docs/image

Solid Tailwind CSS variant installation command for deno.

```bash
deno run -A npm:shadcn@latest add @moduix-solid-tailwind/image
```
Tokens:
Raw