Faq

Rust UI Icons - ChevronLeftRust UI Icons - ChevronRight

Rust UI component for a FAQ section.

  • Rust UI Icons - CopyCopy Demo
What is Rust UI? Open iconicon that represents the state of the summary

Rust UI is a blazingly fast UI library made for Rust fullstack applications. It's built on top of Leptos framework and Tailwind CSS and is designed to be easy to use and customize.

How do I get started with Rust UI? Open iconicon that represents the state of the summary

Getting started with Rust UI is simple. You can copy and paste components directly into your Leptos project. The components are built with Tailwind CSS classes and follow modern Rust patterns for type safety and performance.

What's the difference between Rust UI and other UI libraries?Open iconicon that represents the state of the summary

Unlike React-based libraries, Rust UI is specifically designed for the Rust ecosystem using Leptos. It provides type-safe, performant components that compile to WebAssembly, offering better performance and memory safety than JavaScript alternatives.

How do I use Rust UI components in my project? Open iconicon that represents the state of the summary

Simply copy the Rust component code and paste it into your Leptos project. Each component comes with its dependencies and styling already configured. You own the code, so you can customize and extend components to fit your specific needs. 

use leptos::prelude::*;

#[component]
pub fn DemoFaq() -> impl IntoView {
    view! {
        <section class="w-full rounded divide-y divide-slate-200">
            <details class="p-4 group" open>
                <summary class="relative pr-8 font-medium list-none transition-colors duration-300 cursor-pointer [&::-webkit-details-marker]:hidden text-slate-700 group-hover:text-slate-900 focus-visible:outline-hidden">
                    What is Rust UI?
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="absolute right-0 top-1 w-4 h-4 transition duration-300 stroke-slate-700 shrink-0 group-open:rotate-45"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        stroke-width="1.5"
                        aria-labelledby="title-ac01 desc-ac01"
                    >
                        <title id="title-ac01">Open icon</title>
                        <desc id="desc-ac01">icon that represents the state of the summary</desc>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                    </svg>
                </summary>
                <p class="mt-4 text-slate-500">
                    "Rust UI is a blazingly fast UI library made for Rust fullstack applications. It's built on top of Leptos framework and Tailwind CSS and is designed to be easy to use and customize."
                </p>
            </details>
            <details class="p-4 group">
                <summary class="relative pr-8 font-medium list-none transition-colors duration-300 cursor-pointer [&::-webkit-details-marker]:hidden text-slate-700 group-hover:text-slate-900 focus-visible:outline-hidden">
                    How do I get started with Rust UI?
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="absolute right-0 top-1 w-4 h-4 transition duration-300 stroke-slate-700 shrink-0 group-open:rotate-45"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        stroke-width="1.5"
                        aria-labelledby="title-ac02 desc-ac02"
                    >
                        <title id="title-ac02">Open icon</title>
                        <desc id="desc-ac02">icon that represents the state of the summary</desc>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                    </svg>
                </summary>
                <p class="mt-4 text-slate-500">
                    Getting started with Rust UI is simple. You can copy and paste components directly into your Leptos project. The components are built with Tailwind CSS classes and follow modern Rust patterns for type safety and performance.
                </p>
            </details>
            <details class="p-4 group">
                <summary class="relative pr-8 font-medium list-none transition-colors duration-300 cursor-pointer [&::-webkit-details-marker]:hidden text-slate-700 group-hover:text-slate-900 focus-visible:outline-hidden">
                    "What's the difference between Rust UI and other UI libraries?"
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="absolute right-0 top-1 w-4 h-4 transition duration-300 stroke-slate-700 shrink-0 group-open:rotate-45"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        stroke-width="1.5"
                        aria-labelledby="title-ac03 desc-ac03"
                    >
                        <title id="title-ac03">Open icon</title>
                        <desc id="desc-ac03">icon that represents the state of the summary</desc>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                    </svg>
                </summary>
                <p class="mt-4 text-slate-500">
                    Unlike React-based libraries, Rust UI is specifically designed for the Rust ecosystem using Leptos. It provides type-safe, performant components that compile to WebAssembly, offering better performance and memory safety than JavaScript alternatives.
                </p>
            </details>
            <details class="p-4 group">
                <summary class="relative pr-8 font-medium list-none transition-colors duration-300 cursor-pointer [&::-webkit-details-marker]:hidden text-slate-700 group-hover:text-slate-900 focus-visible:outline-hidden">
                    How do I use Rust UI components in my project?
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="absolute right-0 top-1 w-4 h-4 transition duration-300 stroke-slate-700 shrink-0 group-open:rotate-45"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        stroke-width="1.5"
                        aria-labelledby="title-ac04 desc-ac04"
                    >
                        <title id="title-ac04">Open icon</title>
                        <desc id="desc-ac04">icon that represents the state of the summary</desc>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                    </svg>
                </summary>
                <p class="mt-4 text-slate-500">
                    Simply copy the Rust component code and paste it into your Leptos project. Each component comes with its dependencies and styling already configured. You own the code, so you can customize and extend components to fit your specific needs.
                </p>
            </details>
        </section>
    }
}

Installation

You can run either of the following commands:

# cargo install ui-cli --force
ui add demo_faq
ui add faq

Update the imports to match your project setup.

Copy and paste the following code into your project:

components/ui/faq.rs

use leptos::prelude::*;
use leptos_ui::clx;
use tw_merge::*;

mod components {
    use super::*;
    clx! {Faq, div, "flex flex-col gap-3 w-full max-w-screen-md"}
    clx! {FaqTitle, span, "text-lg text-primary"}
    clx! {FaqDescription, p, "pr-6 mb-2 text-muted-foreground"}
    clx! {FaqSection, div, "w-full rounded bg-accent/30 hover:bg-accent flex flex-col"}

    clx! {RootContent, div, "grid overflow-hidden mt-2 transition-all duration-500 grid-rows-[0fr] peer-checked:grid-rows-[1fr]"}
}

pub use components::*;

/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/*                     ✨ FUNCTIONS ✨                        */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/

#[component]
pub fn FaqContent(children: Children) -> impl IntoView {
    view! {
        <RootContent>
            <div class="px-4 min-h-[0]">{children()}</div>
        </RootContent>
    }
}

#[component]
pub fn FaqLabel(
    #[prop(into, optional)] class: Signal<String>,
    #[prop(into)] for_attr: &'static str,
    children: Children,
) -> impl IntoView {
    let class = Memo::new(move |_| {
        tw_merge!("flex justify-between items-center py-2 px-4 mt-2 w-full cursor-pointer", class())
    });

    view! {
        <label class=class for=for_attr>
            {children()}
        </label>
    }
}

#[component]
pub fn FaqInput(#[prop(into)] id: &'static str) -> impl IntoView {
    view! { <input id=id type="checkbox" class="ml-auto sr-only peer" /> }
}

Update the imports to match your project setup.

Examples

Transition FAQ

  • Rust UI Icons - CopyCopy Demo

Rust UI is a Blazingly fast UI library made for Rust fullstack applications. It's built on top of Leptos framework and Tailwind CSS and is designed to be easy to use and customize.

We took inspiration of Shadcn UI to create a modular approach to building UI components. It means that you can easily customize and extend the components to your needs. You also 'own' your components, they are directly in your codebase.

Yes, you can use Rust UI in your project. It's licensed under the MIT license, so you can use it in your commercial projects. At the moment, all the components are free, but it might change in the future.

use icons::Plus;
use leptos::prelude::*;

use crate::components::ui::faq_transition::{Faq, FaqContent, FaqDescription, FaqInput, FaqLabel, FaqSection, FaqTitle};

#[component]
pub fn DemoFaqTransition() -> impl IntoView {
    const TARGET_FAQ_1: &str = "faq1";
    const TARGET_FAQ_2: &str = "faq2";
    const TARGET_FAQ_3: &str = "faq3";

    view! {
        <section class="flex flex-col justify-center items-center py-6 px-12 w-screen h-[600px] bg-zinc-200 text-zinc-50 dark:bg-zinc-900">

            <Faq>
                <FaqSection>
                    <FaqInput id=TARGET_FAQ_1 />
                    <FaqLabel for_attr=TARGET_FAQ_1>
                        <FaqTitle>{"What is Rust UI?"}</FaqTitle>
                        <Plus class="size-5 text-primary" />
                    </FaqLabel>
                    <FaqContent>
                        <FaqDescription>
                            {"Rust UI is a Blazingly fast UI library made for Rust fullstack applications. It's built on top of Leptos framework and Tailwind CSS and is designed to be easy to use and customize."}
                        </FaqDescription>
                    </FaqContent>
                </FaqSection>

                <FaqSection>
                    <FaqInput id=TARGET_FAQ_2 />
                    <FaqLabel for_attr=TARGET_FAQ_2>
                        <FaqTitle>{"What difference between Rust UI and Shadcn UI?"}</FaqTitle>
                        <Plus class="size-5 text-primary" />
                    </FaqLabel>
                    <FaqContent>
                        <FaqDescription>
                            {"We took inspiration of Shadcn UI to create a modular approach to building UI components. It means that you can easily customize and extend the components to your needs. You also 'own' your components, they are directly in your codebase."}
                        </FaqDescription>
                    </FaqContent>
                </FaqSection>

                <FaqSection>
                    <FaqInput id=TARGET_FAQ_3 />
                    <FaqLabel for_attr=TARGET_FAQ_3>
                        <FaqTitle>{"Can I use Rust UI in my project?"}</FaqTitle>
                        <Plus class="size-5 text-primary" />
                    </FaqLabel>
                    <FaqContent>
                        <FaqDescription>
                            {"Yes, you can use Rust UI in your project. It's licensed under the MIT license, so you can use it in your commercial projects. At the moment, all the components are free, but it might change in the future."}
                        </FaqDescription>
                    </FaqContent>
                </FaqSection>
            </Faq>

        </section>
    }
}

Usage

// Coming soon 🦀
Rust UI Icons - ChevronLeftDropzoneGridRust UI Icons - ChevronRight