infinity-ui

A frosted-glass + accent component library for Leptos 0.8. Dark by default, retheme through CSS custom properties, no JavaScript dependencies — every icon is inline SVG and every animation is a CSS keyframe.

crates/infinity-ui   the library
examples/gallery     every component, rendered live (trunk serve)
style/               the Tailwind preset and the stylesheet consumers import

The site it was extracted from lives in a sibling repo and consumes this crate by path; nothing in here knows about that site.

Using it

# Cargo.toml
[dependencies]
infinity-ui = { path = "../infinity-ui-wasm/crates/infinity-ui", features = ["csr"] }
leptos = { version = "0.8", features = ["csr"] }

// tailwind.config.js
module.exports = {
  presets: [require("../infinity-ui-wasm/style/tailwind-preset.js")],
  content: [
    "./index.html",
    "./src/**/*.rs",
    // Required: the library's classes live in its Rust source, so Tailwind
    // must scan it or every component ships unstyled.
    "../infinity-ui-wasm/crates/infinity-ui/src/**/*.rs",
  ],
};

/* input.css */
@import "../infinity-ui-wasm/style/infinity-ui.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

use infinity_ui::prelude::*;

#[component]
fn App() -> impl IntoView {
    view! {
        <Panel class="p-6">
            <H2>"Ready"</H2>
            <Button variant=Variant::Solid icon=icons::SPARKLES>"Go"</Button>
        </Panel>
    }
}

Features: csr (default), hydrate, ssr — they forward to Leptos.

Theming

The accent ramp resolves through --ac-200 … --ac-900, so a whole retheme is seven custom properties, not a rebuild:

:root {
  --ac-200: 167 243 208;  /* emerald */
  --ac-400: 52 211 153;
  --ac-500: 16 185 129;
  --ac-600: 5 150 105;
  /* … */
}

Tone (Accent / Neutral / Info / Warning / Danger / Dev), Size (Xs…Lg) and Variant (Soft / Solid / Glass / Ghost / Link) are the three knobs nearly every component takes, and they compose the same way everywhere.

What's in it

Group	Components
Foundations	Panel, Well, Divider, cn!, glass, sunken
Typography	H1–H3, Lead, P, Eyebrow, Muted, InlineCode, Kbd, List, ListItem
Buttons	Button, IconButton, ButtonGroup, SplitButton
Feedback	Callout, Badge, Alert, Spinner, Progress, Skeleton, Avatar, StatusDot
Surfaces	Card, Tile, Stat, PageHeader, EmptyState, AnimatedPage
Forms	Field, TextInput, TextArea, SearchInput, Select, Switch, Checkbox, Radio, Slider
Overlays	Modal, Drawer, Popover, Tooltip, MenuItem, ToastHost, ConfirmDialog
Navigation	Tabs, Accordion, Breadcrumbs, Pagination, StickyBar, NavList, Link
Site chrome	TopNav, Hamburger, AccountMenu, BackgroundGradientAnimation
Media	MediaGallery (stage, thumbnails, auto-advance, lightbox)
Motion	Reveal, TextGenerate
Data	Table, CodeBlock, CommandLine
Docs	Doc, DocSection, DocPage, DocToc
Icons	75 inline glyphs via Icon + IconData

CodeBlock highlights Rust, TOML, JSON, Bash and friends with a small hand-rolled highlighter, so a code-heavy page costs no extra download and no per-grammar chunks that can 404 after a deploy.

Running the gallery

cd examples/gallery
trunk serve --open

The gallery is itself built out of DocPage, so it doubles as the largest test that the documentation shell works.