An open API service indexing awesome lists of open source software.

https://github.com/leptix/leptix

Accessible components for Leptos
https://github.com/leptix/leptix

Last synced: about 2 months ago
JSON representation

Accessible components for Leptos

Awesome Lists containing this project

README

        


logo

Leptix





Accessible components for Leptos


This library is in early development.


Live Demo


## Installation

```
cargo add leptix_primitives
```

## Server-Side Rendering

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

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

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

## Available Components

Note: Dialogs and components that require floating functionality are not yet implemented; tracking issues for them can be found [here](https://github.com/leptix/leptix/issues/4) and [here](https://github.com/leptix/leptix/issues/2) (respectively)

| Component Name |
| -------------- |
| Accordion |
| AspectRatio |
| Avatar |
| Checkbox |
| Collapsible |
| Label |
| Progress |
| RadioGroup |
| ScrollArea |
| Separator |
| Slider |
| Switch |
| Tabs |
| Toggle |
| ToggleGroup |
| Toolbar |

## Usage

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

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

const CheckboxDemo = () => (








Accept terms and conditions.



);
```

You would have this in Rust using Leptos:

```rust
use leptos::*;
use leptix_primitives::checkbox::*;

#[component]
fn CheckboxDemo() -> impl IntoView {
view! {







"Accept terms and conditions."



}
}
```

## Examples

- [Trunk + TailwindCSS](https://github.com/leptix/leptix/tree/master/examples/csr-with-tailwind)

- [Actix + TailwindCSS](https://github.com/leptix/leptix/tree/master/examples/ssr-with-actix-tailwind)

- [Axum + TailwindCSS](https://github.com/leptix/leptix/tree/master/examples/ssr-with-axum-tailwind)

## Contributing

See [`CONTRIBUTING.md`](/CONTRIBUTING.md) for details on what you should know before you send in pull requests.