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](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 |
## 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",
...
]
```
## 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 = () => (
);
```
You would have this in Rust using Leptos:
```rust
use leptos::*;
use leptix_primitives::checkbox::*;
#[component]
fn CheckboxDemo() -> impl IntoView {
view! {
}
}
```
## 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.