Getting Started

A quick guide to get you started using Wysteria in your app.

Install Wysteria

Add Wysteria to your project using the command line.

npm i @wysteria/design

Wrap your project

Wrap your project with the WuiApp component. This supplies styling for Wysteria's components. It also tells components like Dialog or Popover where to render elements inside Portals (opens in a new tab).

main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { WuiApp } from "@wysteria/design";
 
ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <WuiApp>
            <App />
        </WuiApp>
    </React.StrictMode>,
);

Create your components

We recommend styling with Tailwind (opens in a new tab), but our components can be styled however you want. You can use raw css by adding className to any Wysteria component for example.

LoginDialog.jsx

import {
    Button,
    Dialog,
    DialogClose,
    DialogContent,
    DialogFooter,
    DialogTitle,
    DialogTrigger,
    Input,
    InputIcon,
} from "@wysteria/design";
import { Lock, User } from "lucide-react";
 
const SignUpDialog = () => {
    return (
        <Dialog modal>
            <DialogTrigger>
                <Button> Login </Button>
            </DialogTrigger>
            
            <DialogContent className="flex max-w-fit flex-col items-center gap-8 p-8">
                <DialogTitle>Login Form</DialogTitle>
 
                <div className="flex flex-col gap-6">
                    <Input className="w-64" placeholder="username...">
                        <InputIcon> <User /> </InputIcon>
                    </Input>
                    <Input
                        type="password"
                        className="w-64"
                        placeholder="password..."
                    >
                        <InputIcon> <Lock /> </InputIcon>
                    </Input>
                </div>
 
                <DialogFooter className="mt-4 flex w-full justify-between">
                    <DialogClose>
                        <Button variant="text">Forgot Password?</Button>
                    </DialogClose>
                    <Button> Signup </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};
 
export default SignUpDialog;

Demo

Here's the completed demo.

Greenhouse