Leptix Primitives

Accessible and unstyled components for Leptos

Live Demo

Available Components

Note: Dialogs and components that require floating functionality are not yet implemented; tracking issues for them can be found here and here (respectively)

Server-Side Rendering

Enable the ssr feature flag under your project's features section

[features]
csr = ...
hydrate = ...
ssr = [
  "leptix_primitives/ssr",

  # the rest of your leptos ssr dependencies ...
  "leptos/ssr",
  "dep:leptox_actix",
  ...
]

Usage

These small snippets have been ported one-to-one from radix-ui's documentation site, so where you would have this in JavaScript:

import React from "react";
import * as Checkbox from "@radix-ui/react-checkbox";
import { CheckIcon } from "@radix-ui/react-icons";

const CheckboxDemo = () => (
  <form>
    <div className="flex items-center">
      <Checkbox.Root
        className="shadow-blackA4 hover:bg-violet3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px_black]"
        defaultChecked
        id="c1"
      >
        <Checkbox.Indicator className="text-violet11">
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Root>
      <label
        className="pl-[15px] text-[15px] leading-none text-white"
        htmlFor="c1"
      >
        Accept terms and conditions.
      </label>
    </div>
  </form>
);

You would have this in Rust using Leptos:

use leptos::*;
use leptix_primitives::components::checkbox::{CheckboxIndicator, CheckboxRoot, CheckedState};

#[component]
fn CheckboxDemo() -> impl IntoView {
  view! {
    <form>
      <div class="flex items-center">
        <CheckboxRoot
          default_checked=CheckedState::Checked(true).into()
          attr:class="shadow-blackA4 hover:bg-violet3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px_black]"
          attr:id="c1"
        >
          <CheckboxIndicator attr:class="text-violet11">
            <CheckIcon/>
          </CheckboxIndicator>
        </CheckboxRoot>

        <label class="pl-[15px] text-[15px] leading-none" for="c1">
          <span class="select-none">"Accept terms and conditions."</span>
        </label>
      </div>
    </form>
  }
}

Examples

• Trunk + TailwindCSS

• Actix + TailwindCSS

• Axum + TailwindCSS

Contributing

See CONTRIBUTING.md for details on what you should know before you send in pull requests.