diff --git a/src/pswui/components/Button.tsx b/src/pswui/components/Button.tsx
new file mode 100644
index 0000000..586027b
--- /dev/null
+++ b/src/pswui/components/Button.tsx
@@ -0,0 +1,124 @@
+import React from "react";
+import { vcn, VariantProps, Slot, AsChild } from "@pswui-lib";
+
+const colors = {
+  outline: {
+    focus: "dark:focus-visible:outline-white/20 focus-visible:outline-black/10",
+  },
+  border: {
+    default: "border-neutral-300 dark:border-neutral-700",
+    success: "border-green-400 dark:border-green-600",
+    warning: "border-yellow-400 dark:border-yellow-600",
+    danger: "border-red-400 dark:border-red-600",
+  },
+  background: {
+    default:
+      "bg-white dark:bg-black hover:bg-neutral-200 dark:hover:bg-neutral-800",
+    ghost:
+      "bg-black/0 dark:bg-white/0 hover:bg-black/20 dark:hover:bg-white/20",
+    success:
+      "bg-green-100 dark:bg-green-900 hover:bg-green-200 dark:hover:bg-green-800",
+    warning:
+      "bg-yellow-100 dark:bg-yellow-900 hover:bg-yellow-200 dark:hover:bg-yellow-800",
+    danger: "bg-red-100 dark:bg-red-900 hover:bg-red-200 dark:hover:bg-red-800",
+  },
+  underline: "decoration-current",
+};
+
+const [buttonVariants, resolveVariants] = vcn({
+  base: `w-fit flex flex-row items-center justify-between rounded-md outline outline-1 outline-transparent outline-offset-2 ${colors.outline.focus} transition-all`,
+  variants: {
+    size: {
+      link: "p-0 text-base",
+      sm: "px-2 py-1 text-sm",
+      md: "px-4 py-2 text-base",
+      lg: "px-5 py-3 text-lg",
+      icon: "p-2 text-base",
+    },
+    border: {
+      none: "border-0",
+      solid: `border ${colors.border.default}`,
+      success: `border ${colors.border.success}`,
+      warning: `border ${colors.border.warning}`,
+      danger: `border ${colors.border.danger}`,
+    },
+    background: {
+      default: colors.background.default,
+      ghost: colors.background.ghost,
+      success: colors.background.success,
+      warning: colors.background.warning,
+      danger: colors.background.danger,
+      transparent: "bg-transparent hover:bg-transparent",
+    },
+    decoration: {
+      none: "no-underline",
+      link: `underline decoration-1 underline-offset-2 hover:underline-offset-4 ${colors.underline}`,
+    },
+  },
+  defaults: {
+    size: "md",
+    border: "solid",
+    background: "default",
+    decoration: "none",
+  },
+  presets: {
+    default: {
+      border: "solid",
+      background: "default",
+      decoration: "none",
+      size: "md",
+    },
+    ghost: {
+      border: "none",
+      background: "ghost",
+      decoration: "none",
+      size: "md",
+    },
+    link: {
+      border: "none",
+      background: "transparent",
+      decoration: "link",
+      size: "link",
+    },
+    success: {
+      border: "success",
+      background: "success",
+      decoration: "none",
+      size: "md",
+    },
+    warning: {
+      border: "warning",
+      background: "warning",
+      decoration: "none",
+      size: "md",
+    },
+    danger: {
+      border: "danger",
+      background: "danger",
+      decoration: "none",
+      size: "md",
+    },
+  },
+});
+
+export interface ButtonProps
+  extends Omit<React.ComponentPropsWithoutRef<"button">, "className">,
+    VariantProps<typeof buttonVariants>,
+    AsChild {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const [variantProps, otherPropsCompressed] = resolveVariants(props);
+    const { asChild, ...otherPropsExtracted } = otherPropsCompressed;
+
+    const Comp = asChild ? Slot : "button";
+    const compProps = {
+      ...otherPropsExtracted,
+      className: buttonVariants(variantProps),
+    };
+
+    return <Comp ref={ref} {...compProps} />;
+  },
+);
+
+export { Button };
diff --git a/src/pswui/components/Checkbox.tsx b/src/pswui/components/Checkbox.tsx
new file mode 100644
index 0000000..b37b5ff
--- /dev/null
+++ b/src/pswui/components/Checkbox.tsx
@@ -0,0 +1,113 @@
+import React from "react";
+import { VariantProps, vcn } from "@pswui-lib";
+
+const checkboxColors = {
+  background: {
+    default: "bg-neutral-200 dark:bg-neutral-700",
+    hover: "hover:bg-neutral-300 dark:hover:bg-neutral-600",
+    checked:
+      "has-[input[type=checkbox]:checked]:bg-neutral-300 dark:has-[input[type=checkbox]:checked]:bg-neutral-400",
+    checkedHover:
+      "has-[input[type=checkbox]:checked]:hover:bg-neutral-400 dark:has-[input[type=checkbox]:checked]:hover:bg-neutral-300",
+    disabled:
+      'has-[input[type="checkbox"]:disabled]:bg-neutral-100 dark:has-[input[type="checkbox"]:disabled]:bg-neutral-800',
+    disabledHover:
+      "has-[input[type='checkbox']:disabled]:hover:bg-neutral-100 dark:has-[input[type='checkbox']:disabled]:hover:bg-neutral-800",
+    disabledChecked:
+      "has-[input[type='checkbox']:disabled:checked]:bg-neutral-300 dark:has-[input[type='checkbox']:disabled:checked]:bg-neutral-700",
+    disabledCheckedHover:
+      "has-[input[type='checkbox']:disabled:checked]:hover:bg-neutral-300 dark:has-[input[type='checkbox']:disabled:checked]:hover:bg-neutral-700",
+  },
+  checkmark:
+    "text-black dark:text-white has-[input[type=checkbox]:disabled]:text-neutral-400 dark:has-[input[type=checkbox]:disabled]:text-neutral-500",
+};
+
+const [checkboxVariant, resolveCheckboxVariantProps] = vcn({
+  base: `inline-block rounded-md ${checkboxColors.checkmark} ${checkboxColors.background.disabled} ${checkboxColors.background.default} ${checkboxColors.background.hover} ${checkboxColors.background.checked} ${checkboxColors.background.checkedHover} ${checkboxColors.background.disabledChecked} ${checkboxColors.background.disabledCheckedHover} has-[input[type="checkbox"]:disabled]:cursor-not-allowed transition-colors duration-75 ease-in-out`,
+  variants: {
+    size: {
+      base: "size-[1em] p-0 [&>svg]:size-[1em]",
+      md: "size-[1.5em] p-0.5 [&>svg]:size-[1.25em]",
+      lg: "size-[1.75em] p-1 [&>svg]:size-[1.25em]",
+    },
+  },
+  defaults: {
+    size: "md",
+  },
+});
+
+interface CheckboxProps
+  extends VariantProps<typeof checkboxVariant>,
+    Omit<
+      React.ComponentPropsWithoutRef<"input">,
+      "type" | "className" | "size"
+    > {}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (props, ref) => {
+    const [variantProps, otherPropsCompressed] =
+      resolveCheckboxVariantProps(props);
+    const {
+      defaultChecked,
+      checked: propChecked,
+      onChange,
+      ...otherPropsExtracted
+    } = otherPropsCompressed;
+
+    // internally handles checked, so we can use checked value without prop
+    const [checked, setChecked] = React.useState(defaultChecked ?? false);
+    React.useEffect(() => {
+      if (typeof propChecked === "boolean") {
+        setChecked(propChecked);
+      }
+    }, [propChecked]);
+
+    const internalRef = React.useRef<HTMLInputElement | null>(null);
+
+    return (
+      <>
+        <label className={checkboxVariant(variantProps)}>
+          <input
+            {...otherPropsExtracted}
+            defaultChecked={defaultChecked}
+            checked={
+              typeof defaultChecked === "boolean"
+                ? undefined
+                : checked /* should be either uncontrolled (defaultChecked set) or controlled (checked set) */
+            }
+            onChange={(e) => {
+              setChecked(e.currentTarget.checked);
+              if (onChange) {
+                onChange(e);
+              }
+            }}
+            type="checkbox"
+            className="hidden"
+            ref={(el) => {
+              internalRef.current = el;
+              if (typeof ref === "function") {
+                ref(el);
+              } else if (ref) {
+                ref.current = el;
+              }
+            }}
+          />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            viewBox="0 0 24 24"
+            className={`${checked ? "opacity-100" : "opacity-0"} transition-opacity duration-75 ease-in-out`}
+          >
+            <path
+              fill="currentColor"
+              d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"
+            ></path>
+          </svg>
+        </label>
+      </>
+    );
+  },
+);
+
+export { Checkbox };
diff --git a/src/pswui/components/Dialog.tsx b/src/pswui/components/Dialog.tsx
new file mode 100644
index 0000000..704db6f
--- /dev/null
+++ b/src/pswui/components/Dialog.tsx
@@ -0,0 +1,424 @@
+import React, { Dispatch, SetStateAction, useState } from "react";
+import { Slot, VariantProps, vcn } from "@pswui-lib";
+import ReactDOM from "react-dom";
+
+/**
+ * =========================
+ * DialogContext
+ * =========================
+ */
+
+interface DialogContext {
+  opened: boolean;
+}
+
+const initialDialogContext: DialogContext = { opened: false };
+const DialogContext = React.createContext<
+  [DialogContext, Dispatch<SetStateAction<DialogContext>>]
+>([
+  initialDialogContext,
+  () => {
+    if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+      console.warn(
+        "It seems like you're using DialogContext outside of a provider.",
+      );
+    }
+  },
+]);
+
+const useDialogContext = () => React.useContext(DialogContext);
+
+/**
+ * =========================
+ * DialogRoot
+ * =========================
+ */
+
+interface DialogRootProps {
+  children: React.ReactNode;
+}
+
+const DialogRoot = ({ children }: DialogRootProps) => {
+  const state = useState<DialogContext>(initialDialogContext);
+  return (
+    <DialogContext.Provider value={state}>{children}</DialogContext.Provider>
+  );
+};
+
+/**
+ * =========================
+ * DialogTrigger
+ * =========================
+ */
+
+interface DialogTriggerProps {
+  children: React.ReactNode;
+}
+
+const DialogTrigger = ({ children }: DialogTriggerProps) => {
+  const [_, setState] = useDialogContext();
+  const onClick = () => setState((p) => ({ ...p, opened: true }));
+
+  const slotProps = {
+    onClick,
+    children,
+  };
+
+  return <Slot {...slotProps} />;
+};
+
+/**
+ * =========================
+ * DialogOverlay
+ * =========================
+ */
+
+const [dialogOverlayVariant, resolveDialogOverlayVariant] = vcn({
+  base: "fixed inset-0 z-50 w-full h-full max-w-screen transition-all duration-300 flex flex-col justify-center items-center",
+  variants: {
+    opened: {
+      true: "pointer-events-auto opacity-100",
+      false: "pointer-events-none opacity-0",
+    },
+    blur: {
+      sm: "backdrop-blur-sm",
+      md: "backdrop-blur-md",
+      lg: "backdrop-blur-lg",
+    },
+    darken: {
+      sm: "backdrop-brightness-90",
+      md: "backdrop-brightness-75",
+      lg: "backdrop-brightness-50",
+    },
+    padding: {
+      sm: "p-4",
+      md: "p-6",
+      lg: "p-8",
+    },
+  },
+  defaults: {
+    opened: false,
+    blur: "md",
+    darken: "md",
+    padding: "md",
+  },
+});
+
+interface DialogOverlay
+  extends React.ComponentPropsWithoutRef<"div">,
+    Omit<VariantProps<typeof dialogOverlayVariant>, "opened"> {
+  closeOnClick?: boolean;
+}
+
+const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
+  (props, ref) => {
+    const [{ opened }, setContext] = useDialogContext();
+    const [variantProps, otherPropsCompressed] = resolveDialogOverlayVariant({
+      ...props,
+      opened,
+    });
+    const { children, closeOnClick, onClick, ...otherPropsExtracted } =
+      otherPropsCompressed;
+    return (
+      <>
+        {ReactDOM.createPortal(
+          <div
+            {...otherPropsExtracted}
+            ref={ref}
+            className={dialogOverlayVariant(variantProps)}
+            onClick={(e) => {
+              if (closeOnClick) {
+                setContext((p) => ({ ...p, opened: false }));
+              }
+              onClick?.(e);
+            }}
+          >
+            {children}
+          </div>,
+          document.body,
+        )}
+      </>
+    );
+  },
+);
+
+/**
+ * =========================
+ * DialogContent
+ * =========================
+ */
+
+const [dialogContentVariant, resolveDialogContentVariant] = vcn({
+  base: "transition-transform duration-300 bg-white dark:bg-black border border-neutral-200 dark:border-neutral-800",
+  variants: {
+    opened: {
+      true: "scale-100",
+      false: "scale-50",
+    },
+    size: {
+      fit: "w-fit",
+      fullSm: "w-full max-w-sm",
+      fullMd: "w-full max-w-md",
+      fullLg: "w-full max-w-lg",
+      fullXl: "w-full max-w-xl",
+      full2xl: "w-full max-w-2xl",
+    },
+    rounded: {
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+    },
+    padding: {
+      sm: "p-4",
+      md: "p-6",
+      lg: "p-8",
+    },
+    gap: {
+      sm: "space-y-4",
+      md: "space-y-6",
+      lg: "space-y-8",
+    },
+  },
+  defaults: {
+    opened: false,
+    size: "fit",
+    rounded: "md",
+    padding: "md",
+    gap: "md",
+  },
+});
+
+interface DialogContent
+  extends React.ComponentPropsWithoutRef<"div">,
+    Omit<VariantProps<typeof dialogContentVariant>, "opened"> {}
+
+const DialogContent = React.forwardRef<HTMLDivElement, DialogContent>(
+  (props, ref) => {
+    const [{ opened }] = useDialogContext();
+    const [variantProps, otherPropsCompressed] = resolveDialogContentVariant({
+      ...props,
+      opened,
+    });
+    const { children, ...otherPropsExtracted } = otherPropsCompressed;
+    return (
+      <div
+        {...otherPropsExtracted}
+        ref={ref}
+        className={dialogContentVariant(variantProps)}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+/**
+ * =========================
+ * DialogClose
+ * =========================
+ */
+
+interface DialogCloseProps {
+  children: React.ReactNode;
+}
+
+const DialogClose = ({ children }: DialogCloseProps) => {
+  const [_, setState] = useDialogContext();
+  const onClick = () => setState((p) => ({ ...p, opened: false }));
+
+  const slotProps = {
+    onClick,
+    children,
+  };
+
+  return <Slot {...slotProps} />;
+};
+
+/**
+ * =========================
+ * DialogHeader
+ * =========================
+ */
+
+const [dialogHeaderVariant, resolveDialogHeaderVariant] = vcn({
+  base: "flex flex-col",
+  variants: {
+    gap: {
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+    },
+  },
+  defaults: {
+    gap: "sm",
+  },
+});
+
+interface DialogHeaderProps
+  extends React.ComponentPropsWithoutRef<"header">,
+    VariantProps<typeof dialogHeaderVariant> {}
+
+const DialogHeader = React.forwardRef<HTMLElement, DialogHeaderProps>(
+  (props, ref) => {
+    const [variantProps, otherPropsCompressed] =
+      resolveDialogHeaderVariant(props);
+    const { children, ...otherPropsExtracted } = otherPropsCompressed;
+    return (
+      <header
+        {...otherPropsExtracted}
+        ref={ref}
+        className={dialogHeaderVariant(variantProps)}
+      >
+        {children}
+      </header>
+    );
+  },
+);
+
+/**
+ * =========================
+ * DialogTitle / DialogSubtitle
+ * =========================
+ */
+
+const [dialogTitleVariant, resolveDialogTitleVariant] = vcn({
+  variants: {
+    size: {
+      sm: "text-lg",
+      md: "text-xl",
+      lg: "text-2xl",
+    },
+    weight: {
+      sm: "font-medium",
+      md: "font-semibold",
+      lg: "font-bold",
+    },
+  },
+  defaults: {
+    size: "md",
+    weight: "lg",
+  },
+});
+
+interface DialogTitleProps
+  extends React.ComponentPropsWithoutRef<"h1">,
+    VariantProps<typeof dialogTitleVariant> {}
+
+const [dialogSubtitleVariant, resolveDialogSubtitleVariant] = vcn({
+  variants: {
+    size: {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
+    },
+    opacity: {
+      sm: "opacity-60",
+      md: "opacity-70",
+      lg: "opacity-80",
+    },
+    weight: {
+      sm: "font-light",
+      md: "font-normal",
+      lg: "font-medium",
+    },
+  },
+  defaults: {
+    size: "sm",
+    opacity: "sm",
+    weight: "md",
+  },
+});
+
+interface DialogSubtitleProps
+  extends React.ComponentPropsWithoutRef<"h2">,
+    VariantProps<typeof dialogSubtitleVariant> {}
+
+const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  (props, ref) => {
+    const [variantProps, otherPropsCompressed] =
+      resolveDialogTitleVariant(props);
+    const { children, ...otherPropsExtracted } = otherPropsCompressed;
+    return (
+      <h1
+        {...otherPropsExtracted}
+        ref={ref}
+        className={dialogTitleVariant(variantProps)}
+      >
+        {children}
+      </h1>
+    );
+  },
+);
+
+const DialogSubtitle = React.forwardRef<
+  HTMLHeadingElement,
+  DialogSubtitleProps
+>((props, ref) => {
+  const [variantProps, otherPropsCompressed] =
+    resolveDialogSubtitleVariant(props);
+  const { children, ...otherPropsExtracted } = otherPropsCompressed;
+  return (
+    <h2
+      {...otherPropsExtracted}
+      ref={ref}
+      className={dialogSubtitleVariant(variantProps)}
+    >
+      {children}
+    </h2>
+  );
+});
+
+/**
+ * =========================
+ * DialogFooter
+ * =========================
+ */
+
+const [dialogFooterVariant, resolveDialogFooterVariant] = vcn({
+  base: "flex flex-col items-end sm:flex-row sm:items-center sm:justify-end",
+  variants: {
+    gap: {
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+    },
+  },
+  defaults: {
+    gap: "md",
+  },
+});
+
+interface DialogFooterProps
+  extends React.ComponentPropsWithoutRef<"footer">,
+    VariantProps<typeof dialogFooterVariant> {}
+
+const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
+  (props, ref) => {
+    const [variantProps, otherPropsCompressed] =
+      resolveDialogFooterVariant(props);
+    const { children, ...otherPropsExtracted } = otherPropsCompressed;
+    return (
+      <div
+        {...otherPropsExtracted}
+        ref={ref}
+        className={dialogFooterVariant(variantProps)}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export {
+  useDialogContext,
+  DialogRoot,
+  DialogTrigger,
+  DialogOverlay,
+  DialogContent,
+  DialogClose,
+  DialogHeader,
+  DialogTitle,
+  DialogSubtitle,
+  DialogFooter,
+};
diff --git a/src/pswui/components/Drawer.tsx b/src/pswui/components/Drawer.tsx
new file mode 100644
index 0000000..fbaa187
--- /dev/null
+++ b/src/pswui/components/Drawer.tsx
@@ -0,0 +1,476 @@
+import React, {
+  ComponentPropsWithoutRef,
+  TouchEvent as ReactTouchEvent,
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
+import { createPortal } from "react-dom";
+
+interface IDrawerContext {
+  opened: boolean;
+  closeThreshold: number;
+  movePercentage: number;
+  isDragging: boolean;
+  leaveWhileDragging: boolean;
+}
+const DrawerContextInitial: IDrawerContext = {
+  opened: false,
+  closeThreshold: 0.3,
+  movePercentage: 0,
+  isDragging: false,
+  leaveWhileDragging: false,
+};
+const DrawerContext = React.createContext<
+  [IDrawerContext, React.Dispatch<React.SetStateAction<IDrawerContext>>]
+>([
+  DrawerContextInitial,
+  () => {
+    if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+      console.warn(
+        "It seems like you're using DrawerContext outside of a provider.",
+      );
+    }
+  },
+]);
+
+interface DrawerRootProps {
+  children: React.ReactNode;
+  closeThreshold?: number;
+  opened?: boolean;
+}
+
+const DrawerRoot = ({ children, closeThreshold, opened }: DrawerRootProps) => {
+  const state = useState<IDrawerContext>({
+    ...DrawerContextInitial,
+    opened: opened ?? DrawerContextInitial.opened,
+    closeThreshold: closeThreshold ?? DrawerContextInitial.closeThreshold,
+  });
+
+  useEffect(() => {
+    state[1]((prev) => ({
+      ...prev,
+      opened: opened ?? prev.opened,
+      closeThreshold: closeThreshold ?? prev.closeThreshold,
+    }));
+  }, [closeThreshold, opened]);
+
+  return (
+    <DrawerContext.Provider value={state}>{children}</DrawerContext.Provider>
+  );
+};
+
+const DrawerTrigger = ({ children }: { children: React.ReactNode }) => {
+  const [_, setState] = useContext(DrawerContext);
+
+  function onClick() {
+    setState((prev) => ({ ...prev, opened: true }));
+  }
+
+  return <Slot onClick={onClick}>{children}</Slot>;
+};
+
+const [drawerOverlayVariant, resolveDrawerOverlayVariantProps] = vcn({
+  base: "fixed inset-0 transition-[backdrop-filter] duration-75",
+  variants: {
+    opened: {
+      true: "pointer-events-auto select-auto",
+      false: "pointer-events-none select-none",
+    },
+  },
+  defaults: {
+    opened: false,
+  },
+});
+
+const DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS = 0.3;
+
+interface DrawerOverlayProps
+  extends Omit<VariantProps<typeof drawerOverlayVariant>, "opened">,
+    AsChild,
+    ComponentPropsWithoutRef<"div"> {}
+
+const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
+  (props, ref) => {
+    const [state, setState] = useContext(DrawerContext);
+
+    const [variantProps, restPropsCompressed] =
+      resolveDrawerOverlayVariantProps(props);
+    const { asChild, ...restPropsExtracted } = restPropsCompressed;
+
+    function onOutsideClick() {
+      if (state.leaveWhileDragging) {
+        setState((prev) => ({ ...prev, leaveWhileDragging: false }));
+        return;
+      }
+      setState((prev) => ({ ...prev, opened: false }));
+    }
+
+    const Comp = asChild ? Slot : "div";
+    const backdropFilter = `brightness(${
+      state.isDragging
+        ? state.movePercentage + DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
+        : state.opened
+          ? DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
+          : 1
+    })`;
+
+    return createPortal(
+      <Comp
+        {...restPropsExtracted}
+        className={drawerOverlayVariant({
+          ...variantProps,
+          opened: state.isDragging ? true : state.opened,
+        })}
+        onClick={onOutsideClick}
+        style={{
+          backdropFilter,
+          WebkitBackdropFilter: backdropFilter,
+          transitionDuration: state.isDragging ? "0s" : undefined,
+        }}
+        ref={ref}
+      />,
+      document.body,
+    );
+  },
+);
+
+const drawerContentColors = {
+  background: "bg-white dark:bg-black",
+  border: "border-neutral-200 dark:border-neutral-800",
+};
+
+const [drawerContentVariant, resolveDrawerContentVariantProps] = vcn({
+  base: `fixed ${drawerContentColors.background} ${drawerContentColors.border} transition-all p-4 flex flex-col justify-between gap-8`,
+  variants: {
+    position: {
+      top: "top-0 inset-x-0 w-full max-w-screen rounded-t-lg border-b-2",
+      bottom: "bottom-0 inset-x-0 w-full max-w-screen rounded-b-lg border-t-2",
+      left: "left-0 inset-y-0 h-screen rounded-l-lg border-r-2",
+      right: "right-0 inset-y-0 h-screen rounded-r-lg border-l-2",
+    },
+    opened: {
+      true: "touch-none",
+      false:
+        "[&.top-0]:-translate-y-full [&.bottom-0]:translate-y-full [&.left-0]:-translate-x-full [&.right-0]:translate-x-full",
+    },
+  },
+  defaults: {
+    position: "left",
+    opened: false,
+  },
+});
+
+interface DrawerContentProps
+  extends Omit<VariantProps<typeof drawerContentVariant>, "opened">,
+    AsChild,
+    ComponentPropsWithoutRef<"div"> {}
+
+const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
+  (props, ref) => {
+    const [state, setState] = useContext(DrawerContext);
+    const [dragState, setDragState] = useState({
+      isDragging: false,
+      prevTouch: { x: 0, y: 0 },
+      delta: 0,
+    });
+
+    const [variantProps, restPropsCompressed] =
+      resolveDrawerContentVariantProps(props);
+    const { position = "left" } = variantProps;
+    const { asChild, onClick, ...restPropsExtracted } = restPropsCompressed;
+
+    const Comp = asChild ? Slot : "div";
+
+    const internalRef = useRef<HTMLDivElement | null>(null);
+
+    function onMouseDown() {
+      setState((prev) => ({ ...prev, isDragging: true }));
+      setDragState({
+        isDragging: true,
+        delta: 0,
+        prevTouch: { x: 0, y: 0 },
+      });
+    }
+
+    function onTouchStart(e: ReactTouchEvent<HTMLDivElement>) {
+      setState((prev) => ({ ...prev, isDragging: true }));
+      setDragState({
+        isDragging: true,
+        delta: 0,
+        prevTouch: { x: e.touches[0].pageX, y: e.touches[0].pageY },
+      });
+    }
+
+    useEffect(() => {
+      function onMouseUp(e: TouchEvent): void;
+      function onMouseUp(e: MouseEvent): void;
+      function onMouseUp(e: TouchEvent | MouseEvent) {
+        if (
+          e.target instanceof Element &&
+          internalRef.current &&
+          internalRef.current.contains(e.target)
+        ) {
+          const size = ["top", "bottom"].includes(position)
+            ? e.target.getBoundingClientRect().height
+            : e.target.getBoundingClientRect().width;
+          setState((prev) => ({
+            ...prev,
+            isDragging: false,
+            opened:
+              Math.abs(dragState.delta) > state.closeThreshold * size
+                ? false
+                : prev.opened,
+            movePercentage: 0,
+          }));
+        } else {
+          setState((prev) => ({
+            ...prev,
+            isDragging: false,
+            movePercentage: 0,
+          }));
+        }
+        setDragState({
+          isDragging: false,
+          delta: 0,
+          prevTouch: { x: 0, y: 0 },
+        });
+      }
+
+      function onMouseMove(e: TouchEvent): void;
+      function onMouseMove(e: MouseEvent): void;
+      function onMouseMove(e: MouseEvent | TouchEvent) {
+        if (dragState.isDragging) {
+          setDragState((prev) => {
+            let movement = ["top", "bottom"].includes(position)
+              ? "movementY" in e
+                ? e.movementY
+                : e.touches[0].pageY - prev.prevTouch.y
+              : "movementX" in e
+                ? e.movementX
+                : e.touches[0].pageX - prev.prevTouch.x;
+            if (
+              (["top", "left"].includes(position) &&
+                dragState.delta >= 0 &&
+                movement > 0) ||
+              (["bottom", "right"].includes(position) &&
+                dragState.delta <= 0 &&
+                movement < 0)
+            ) {
+              movement =
+                movement /
+                Math.abs(dragState.delta === 0 ? 1 : dragState.delta);
+            }
+            return {
+              ...prev,
+              delta: prev.delta + movement,
+              ...("touches" in e
+                ? {
+                    prevTouch: { x: e.touches[0].pageX, y: e.touches[0].pageY },
+                  }
+                : {}),
+            };
+          });
+
+          if (internalRef.current) {
+            const size = ["top", "bottom"].includes(position)
+              ? internalRef.current.getBoundingClientRect().height
+              : internalRef.current.getBoundingClientRect().width;
+            const movePercentage = dragState.delta / size;
+            setState((prev) => ({
+              ...prev,
+              movePercentage: ["top", "left"].includes(position)
+                ? -movePercentage
+                : movePercentage,
+            }));
+          }
+        }
+      }
+
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+      window.addEventListener("touchmove", onMouseMove);
+      window.addEventListener("touchend", onMouseUp);
+      return () => {
+        window.removeEventListener("mousemove", onMouseMove);
+        window.removeEventListener("mouseup", onMouseUp);
+        window.removeEventListener("touchmove", onMouseMove);
+        window.removeEventListener("touchend", onMouseUp);
+      };
+    }, [state, dragState]);
+
+    return (
+      <div
+        className={drawerContentVariant({
+          ...variantProps,
+          opened: true,
+          className: dragState.isDragging
+            ? "transition-[width_0ms]"
+            : variantProps.className,
+        })}
+        style={
+          state.opened
+            ? ["top", "bottom"].includes(position)
+              ? {
+                  height:
+                    (internalRef.current?.getBoundingClientRect?.()?.height ??
+                      0) +
+                    (position === "top" ? dragState.delta : -dragState.delta),
+                  padding: 0,
+                }
+              : {
+                  width:
+                    (internalRef.current?.getBoundingClientRect?.()?.width ??
+                      0) +
+                    (position === "left" ? dragState.delta : -dragState.delta),
+                  padding: 0,
+                }
+            : { width: 0, height: 0, padding: 0 }
+        }
+      >
+        <Comp
+          {...restPropsExtracted}
+          className={drawerContentVariant({
+            ...variantProps,
+            opened: state.opened,
+          })}
+          style={{
+            transform: dragState.isDragging
+              ? `translate${["top", "bottom"].includes(position) ? "Y" : "X"}(${
+                  dragState.delta
+                }px)`
+              : undefined,
+            transitionDuration: dragState.isDragging ? "0s" : undefined,
+            userSelect: dragState.isDragging ? "none" : undefined,
+          }}
+          ref={(el) => {
+            internalRef.current = el;
+            if (typeof ref === "function") {
+              ref(el);
+            } else if (ref) {
+              ref.current = el;
+            }
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClick?.(e);
+          }}
+          onMouseDown={onMouseDown}
+          onMouseLeave={() =>
+            dragState.isDragging &&
+            setState((prev) => ({ ...prev, leaveWhileDragging: true }))
+          }
+          onMouseEnter={() =>
+            dragState.isDragging &&
+            setState((prev) => ({ ...prev, leaveWhileDragging: false }))
+          }
+          onTouchStart={onTouchStart}
+        />
+      </div>
+    );
+  },
+);
+
+const DrawerClose = forwardRef<
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<"button">
+>((props, ref) => {
+  const [_, setState] = useContext(DrawerContext);
+  return (
+    <Slot
+      ref={ref}
+      {...props}
+      onClick={() => setState((prev) => ({ ...prev, opened: false }))}
+    />
+  );
+});
+
+const [drawerHeaderVariant, resolveDrawerHeaderVariantProps] = vcn({
+  base: "flex flex-col gap-2",
+  variants: {},
+  defaults: {},
+});
+
+interface DrawerHeaderProps
+  extends ComponentPropsWithoutRef<"div">,
+    VariantProps<typeof drawerHeaderVariant>,
+    AsChild {}
+
+const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
+  (props, ref) => {
+    const [variantProps, restPropsCompressed] =
+      resolveDrawerHeaderVariantProps(props);
+    const { asChild, ...restPropsExtracted } = restPropsCompressed;
+    return (
+      <div
+        {...restPropsExtracted}
+        className={drawerHeaderVariant(variantProps)}
+        ref={ref}
+      />
+    );
+  },
+);
+
+const [drawerBodyVariant, resolveDrawerBodyVariantProps] = vcn({
+  base: "flex-grow",
+  variants: {},
+  defaults: {},
+});
+
+interface DrawerBodyProps
+  extends ComponentPropsWithoutRef<"div">,
+    VariantProps<typeof drawerBodyVariant>,
+    AsChild {}
+
+const DrawerBody = forwardRef<HTMLDivElement, DrawerBodyProps>((props, ref) => {
+  const [variantProps, restPropsCompressed] =
+    resolveDrawerBodyVariantProps(props);
+  const { asChild, ...restPropsExtracted } = restPropsCompressed;
+  return (
+    <div
+      {...restPropsExtracted}
+      className={drawerBodyVariant(variantProps)}
+      ref={ref}
+    />
+  );
+});
+
+const [drawerFooterVariant, resolveDrawerFooterVariantProps] = vcn({
+  base: "flex flex-row justify-end gap-2",
+  variants: {},
+  defaults: {},
+});
+
+interface DrawerFooterProps
+  extends ComponentPropsWithoutRef<"div">,
+    VariantProps<typeof drawerFooterVariant>,
+    AsChild {}
+
+const DrawerFooter = forwardRef<HTMLDivElement, DrawerFooterProps>(
+  (props, ref) => {
+    const [variantProps, restPropsCompressed] =
+      resolveDrawerFooterVariantProps(props);
+    const { asChild, ...restPropsExtracted } = restPropsCompressed;
+    return (
+      <div
+        {...restPropsExtracted}
+        className={drawerFooterVariant(variantProps)}
+        ref={ref}
+      />
+    );
+  },
+);
+
+export {
+  DrawerRoot,
+  DrawerTrigger,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerClose,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+};
diff --git a/src/pswui/components/Input.tsx b/src/pswui/components/Input.tsx
new file mode 100644
index 0000000..daf50e9
--- /dev/null
+++ b/src/pswui/components/Input.tsx
@@ -0,0 +1,117 @@
+import React from "react";
+import { VariantProps, vcn } from "@pswui-lib";
+
+const inputColors = {
+  background: {
+    default: "bg-neutral-50 dark:bg-neutral-900",
+    hover: "hover:bg-neutral-100 dark:hover:bg-neutral-800",
+    invalid:
+      "invalid:bg-red-100 invalid:dark:bg-red-900 has-[input:invalid]:bg-red-100 dark:has-[input:invalid]:bg-red-900",
+    invalidHover:
+      "hover:invalid:bg-red-200 dark:hover:invalid:bg-red-800 has-[input:invalid:hover]:bg-red-200 dark:has-[input:invalid:hover]:bg-red-800",
+  },
+  border: {
+    default: "border-neutral-400 dark:border-neutral-600",
+    invalid:
+      "invalid:border-red-400 invalid:dark:border-red-600 has-[input:invalid]:border-red-400 dark:has-[input:invalid]:border-red-600",
+  },
+  ring: {
+    default: "ring-transparent focus-within:ring-current",
+    invalid:
+      "invalid:focus-within:ring-red-400 invalid:focus-within:dark:ring-red-600 has-[input:invalid]:focus-within:ring-red-400 dark:has-[input:invalid]:focus-within:ring-red-600",
+  },
+};
+
+const [inputVariant, resolveInputVariantProps] = vcn({
+  base: `rounded-md p-2 border ring-1 outline-none transition-all duration-200 [appearance:textfield] disabled:brightness-50 disabled:saturate-0 disabled:cursor-not-allowed ${inputColors.background.default} ${inputColors.background.hover} ${inputColors.border.default} ${inputColors.ring.default} ${inputColors.background.invalid} ${inputColors.background.invalidHover} ${inputColors.border.invalid} ${inputColors.ring.invalid} [&:has(input)]:flex [&:has(input)]:w-fit`,
+  variants: {
+    unstyled: {
+      true: "bg-transparent border-none p-0 ring-0 hover:bg-transparent invalid:hover:bg-transparent invalid:focus-within:bg-transparent invalid:focus-within:ring-0",
+      false: "",
+    },
+    full: {
+      true: "w-full",
+      false: "w-fit",
+    },
+  },
+  defaults: {
+    unstyled: false,
+    full: false,
+  },
+});
+
+interface InputFrameProps
+  extends VariantProps<typeof inputVariant>,
+    React.ComponentPropsWithoutRef<"label"> {
+  children?: React.ReactNode;
+}
+
+const InputFrame = React.forwardRef<HTMLLabelElement, InputFrameProps>(
+  (props, ref) => {
+    const [variantProps, otherPropsCompressed] =
+      resolveInputVariantProps(props);
+    const { children, ...otherPropsExtracted } = otherPropsCompressed;
+
+    return (
+      <label
+        ref={ref}
+        className={`group/input-frame ${inputVariant(variantProps)}`}
+        {...otherPropsExtracted}
+      >
+        {children}
+      </label>
+    );
+  },
+);
+
+interface InputProps
+  extends VariantProps<typeof inputVariant>,
+    React.ComponentPropsWithoutRef<"input"> {
+  type: Exclude<
+    React.InputHTMLAttributes<HTMLInputElement>["type"],
+    | "button"
+    | "checkbox"
+    | "color"
+    | "date"
+    | "datetime-local"
+    | "file"
+    | "radio"
+    | "range"
+    | "reset"
+    | "image"
+    | "submit"
+    | "time"
+  >;
+  invalid?: string;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const [variantProps, otherPropsCompressed] = resolveInputVariantProps(props);
+  const { type, invalid, ...otherPropsExtracted } = otherPropsCompressed;
+
+  const innerRef = React.useRef<HTMLInputElement | null>(null);
+
+  React.useEffect(() => {
+    if (innerRef && innerRef.current) {
+      innerRef.current.setCustomValidity(invalid ?? "");
+    }
+  }, [invalid]);
+
+  return (
+    <input
+      type={type}
+      ref={(el) => {
+        innerRef.current = el;
+        if (typeof ref === "function") {
+          ref(el);
+        } else if (ref) {
+          ref.current = el;
+        }
+      }}
+      className={inputVariant(variantProps)}
+      {...otherPropsExtracted}
+    />
+  );
+});
+
+export { InputFrame, Input };
diff --git a/src/pswui/components/Label.tsx b/src/pswui/components/Label.tsx
new file mode 100644
index 0000000..d2ff753
--- /dev/null
+++ b/src/pswui/components/Label.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { VariantProps, vcn } from "@pswui-lib";
+
+const [labelVariant, resolveLabelVariantProps] = vcn({
+  base: "has-[input[disabled]]:brightness-75 has-[input[disabled]]:cursor-not-allowed has-[input:invalid]:text-red-500",
+  variants: {
+    direction: {
+      vertical: "flex flex-col gap-2 justify-center items-start",
+      horizontal: "flex flex-row gap-2 justify-start items-center",
+    },
+  },
+  defaults: {
+    direction: "vertical",
+  },
+});
+
+interface LabelProps
+  extends VariantProps<typeof labelVariant>,
+    React.ComponentPropsWithoutRef<"label"> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>((props, ref) => {
+  const [variantProps, otherPropsCompressed] = resolveLabelVariantProps(props);
+
+  return (
+    <label
+      ref={ref}
+      {...otherPropsCompressed}
+      className={labelVariant(variantProps)}
+    />
+  );
+});
+
+export { Label };
diff --git a/src/pswui/components/Popover.tsx b/src/pswui/components/Popover.tsx
new file mode 100644
index 0000000..4f2ff0e
--- /dev/null
+++ b/src/pswui/components/Popover.tsx
@@ -0,0 +1,139 @@
+import React, { useContext, useEffect, useRef } from "react";
+import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
+
+interface IPopoverContext {
+  opened: boolean;
+}
+
+const PopoverContext = React.createContext<
+  [IPopoverContext, React.Dispatch<React.SetStateAction<IPopoverContext>>]
+>([
+  {
+    opened: false,
+  },
+  () => {
+    if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+      console.warn(
+        "It seems like you're using PopoverContext outside of a provider.",
+      );
+    }
+  },
+]);
+
+interface PopoverProps extends AsChild {
+  children: React.ReactNode;
+  opened?: boolean;
+}
+
+const Popover = ({ children, opened, asChild }: PopoverProps) => {
+  const state = React.useState<IPopoverContext>({
+    opened: opened ?? false,
+  });
+
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <PopoverContext.Provider value={state}>
+      <Comp className="relative">{children}</Comp>
+    </PopoverContext.Provider>
+  );
+};
+
+const PopoverTrigger = ({ children }: { children: React.ReactNode }) => {
+  const [_, setState] = React.useContext(PopoverContext);
+  function setOpen() {
+    setState((prev) => ({ ...prev, opened: true }));
+  }
+
+  return <Slot onClick={setOpen}>{children}</Slot>;
+};
+
+const popoverColors = {
+  background: "bg-white dark:bg-black",
+  border: "border-neutral-200 dark:border-neutral-800",
+};
+
+const [popoverContentVariant, resolvePopoverContentVariantProps] = vcn({
+  base: `absolute transition-all duration-150 border rounded-lg p-0.5 [&>*]:w-full ${popoverColors.background} ${popoverColors.border}`,
+  variants: {
+    anchor: {
+      topLeft:
+        "bottom-[calc(100%+var(--popover-offset))] right-[calc(100%+var(--popover-offset))] origin-bottom-right",
+      topCenter:
+        "bottom-[calc(100%+var(--popover-offset))] left-1/2 -translate-x-1/2 origin-bottom-center",
+      topRight:
+        "bottom-[calc(100%+var(--popover-offset))] left-[calc(100%+var(--popover-offset))] origin-bottom-left",
+      middleLeft: "top-1/2 translate-y-1/2 right-full origin-right",
+      middleCenter:
+        "top-1/2 translate-y-1/2 left-1/2 -translate-x-1/2 origin-center",
+      middleRight:
+        "top-1/2 translate-y-1/2 left-[calc(100%+var(--popover-offset))] origin-left",
+      bottomLeft:
+        "top-[calc(100%+var(--popover-offset))] right-[calc(100%+var(--popover-offset))] origin-top-right",
+      bottomCenter:
+        "top-[calc(100%+var(--popover-offset))] left-1/2 -translate-x-1/2 origin-top-center",
+      bottomRight:
+        "top-[calc(100%+var(--popover-offset))] left-[calc(100%+var(--popover-offset))] origin-top-left",
+    },
+    offset: {
+      sm: "[--popover-offset:2px]",
+      md: "[--popover-offset:4px]",
+      lg: "[--popover-offset:8px]",
+    },
+    opened: {
+      true: "opacity-1 scale-100",
+      false: "opacity-0 scale-75",
+    },
+  },
+  defaults: {
+    anchor: "bottomCenter",
+    opened: false,
+    offset: "md",
+  },
+});
+
+interface PopoverContentProps
+  extends Omit<VariantProps<typeof popoverContentVariant>, "opened">,
+    React.ComponentPropsWithoutRef<"div">,
+    AsChild {}
+
+const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
+  (props, ref) => {
+    const [variantProps, otherPropsCompressed] =
+      resolvePopoverContentVariantProps(props);
+    const { children, ...otherPropsExtracted } = otherPropsCompressed;
+    const [state, setState] = useContext(PopoverContext);
+
+    const internalRef = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+      function handleOutsideClick(e: any) {
+        if (internalRef.current && !internalRef.current.contains(e.target)) {
+          setState((prev) => ({ ...prev, opened: false }));
+        }
+      }
+      document.addEventListener("mousedown", handleOutsideClick);
+      return () => {
+        document.removeEventListener("mousedown", handleOutsideClick);
+      };
+    }, [internalRef, setState]);
+
+    return (
+      <div
+        {...otherPropsExtracted}
+        className={popoverContentVariant({
+          ...variantProps,
+          opened: state.opened,
+        })}
+        ref={(el) => {
+          internalRef.current = el;
+          typeof ref === "function" ? ref(el) : ref && (ref.current = el);
+        }}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/src/pswui/components/Switch.tsx b/src/pswui/components/Switch.tsx
new file mode 100644
index 0000000..08d5599
--- /dev/null
+++ b/src/pswui/components/Switch.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import { VariantProps, vcn } from "@pswui-lib";
+
+const switchColors = {
+  background: {
+    default: "bg-neutral-200 dark:bg-neutral-700",
+    hover: "hover:bg-neutral-300 dark:hover:bg-neutral-600",
+    checked:
+      "has-[input[type=checkbox]:checked]:bg-neutral-700 dark:has-[input[type=checkbox]:checked]:bg-neutral-300",
+    checkedHover:
+      "has-[input[type=checkbox]:checked]:hover:bg-black dark:has-[input[type=checkbox]:checked]:hover:bg-white",
+    disabled:
+      "has-[input[type=checkbox]:disabled]:bg-neutral-100 dark:has-[input[type=checkbox]:disabled]:bg-neutral-800",
+    disabledHover:
+      "has-[input[type=checkbox]:disabled]:hover:bg-neutral-100 dark:has-[input[type=checkbox]:disabled]:hover:bg-neutral-800",
+    disabledChecked:
+      "has-[input[type=checkbox]:disabled:checked]:bg-neutral-300 dark:has-[input[type=checkbox]:disabled:checked]:bg-neutral-700",
+    disabledCheckedHover:
+      "has-[input[type=checkbox]:disabled:checked]:hover:bg-neutral-300 dark:has-[input[type=checkbox]:disabled:checked]:hover:bg-neutral-700",
+  },
+  button: {
+    default: "bg-white dark:bg-black",
+  },
+};
+
+const [switchVariant, resolveSwitchVariantProps] = vcn({
+  base: `relative inline-block group/switch rounded-full p-1 has-[input[type=checkbox]:not(:checked)]:pr-5 has-[input[type=checkbox]:checked]:pl-5 ${switchColors.background.default} ${switchColors.background.hover} ${switchColors.background.checked} ${switchColors.background.checkedHover} ${switchColors.background.disabled} ${switchColors.background.disabledHover} ${switchColors.background.disabledChecked} ${switchColors.background.disabledCheckedHover} has-[input[type=checkbox]:disabled]:cursor-not-allowed transition-all duration-200 ease-in-out`,
+  variants: {},
+  defaults: {},
+});
+
+interface SwitchProps
+  extends VariantProps<typeof switchVariant>,
+    Omit<
+      React.ComponentPropsWithoutRef<"input">,
+      "type" | "className" | "size"
+    > {}
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
+  const [variantProps, otherPropsCompressed] = resolveSwitchVariantProps(props);
+  const {
+    defaultChecked,
+    checked: propChecked,
+    onChange,
+    ...otherPropsExtracted
+  } = otherPropsCompressed;
+
+  // internally handles checked, so we can use checked value without prop
+  const [checked, setChecked] = React.useState(defaultChecked ?? false);
+  React.useEffect(() => {
+    if (typeof propChecked === "boolean") {
+      setChecked(propChecked);
+    }
+  }, [propChecked]);
+
+  const internalRef = React.useRef<HTMLInputElement | null>(null);
+
+  return (
+    <label className={switchVariant(variantProps)}>
+      <input
+        {...otherPropsExtracted}
+        defaultChecked={defaultChecked}
+        checked={typeof defaultChecked === "boolean" ? undefined : checked}
+        type="checkbox"
+        className="hidden"
+        onChange={(e) => {
+          setChecked(e.currentTarget.checked);
+          onChange?.(e);
+        }}
+        ref={(el) => {
+          internalRef.current = el;
+          if (typeof ref === "function") {
+            ref(el);
+          } else if (ref) {
+            ref.current = el;
+          }
+        }}
+      />
+      <div className={`w-4 h-4 rounded-full ${switchColors.button.default}`} />
+    </label>
+  );
+});
+
+export { Switch };
diff --git a/src/pswui/components/Tabs.tsx b/src/pswui/components/Tabs.tsx
new file mode 100644
index 0000000..7355f23
--- /dev/null
+++ b/src/pswui/components/Tabs.tsx
@@ -0,0 +1,229 @@
+import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
+import React from "react";
+
+interface Tab {
+  name: string;
+}
+
+interface TabContextBody {
+  tabs: Tab[];
+  active: [number, string] /* index, name */;
+}
+
+const TabContext = React.createContext<
+  [TabContextBody, React.Dispatch<React.SetStateAction<TabContextBody>>]
+>([
+  {
+    tabs: [],
+    active: [0, ""],
+  },
+  () => {
+    if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+      console.warn(
+        "It seems like you're using TabContext outside of provider.",
+      );
+    }
+  },
+]);
+
+interface TabProviderProps {
+  defaultName: string;
+  children: React.ReactNode;
+}
+
+const TabProvider = ({ defaultName, children }: TabProviderProps) => {
+  const state = React.useState<TabContextBody>({
+    tabs: [],
+    active: [0, defaultName],
+  });
+
+  return <TabContext.Provider value={state}>{children}</TabContext.Provider>;
+};
+
+/**
+ * Provides current state for tab, using context.
+ * Also provides functions to control state.
+ */
+const useTabState = () => {
+  const [state, setState] = React.useContext(TabContext);
+
+  function getActiveTab() {
+    return state.active;
+  }
+
+  function setActiveTab(name: string): void;
+  function setActiveTab(index: number): void;
+  function setActiveTab(param: string | number) {
+    if (typeof param === "number") {
+      if (param < 0 || param >= state.tabs.length) {
+        if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+          console.error(
+            `Invalid index passed to setActiveTab: ${param}, valid indices are 0 to ${
+              state.tabs.length - 1
+            }`,
+          );
+        }
+        return;
+      }
+
+      setState((prev) => {
+        return {
+          ...prev,
+          active: [param, prev.tabs[param].name],
+        };
+      });
+    } else if (typeof param === "string") {
+      const index = state.tabs.findIndex((tab) => tab.name === param);
+      if (index === -1) {
+        if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+          console.error(
+            `Invalid name passed to setActiveTab: ${param}, valid names are ${state.tabs
+              .map((tab) => tab.name)
+              .join(", ")}`,
+          );
+        }
+        return;
+      }
+
+      setActiveTab(index);
+    }
+  }
+
+  function setPreviousActive() {
+    if (state.active[0] === 0) {
+      return;
+    }
+    setActiveTab(state.active[0] - 1);
+  }
+
+  function setNextActive() {
+    if (state.active[0] === state.tabs.length - 1) {
+      return;
+    }
+    setActiveTab(state.active[0] + 1);
+  }
+
+  return {
+    getActiveTab,
+    setActiveTab,
+    setPreviousActive,
+    setNextActive,
+  };
+};
+
+const [TabListVariant, resolveTabListVariantProps] = vcn({
+  base: "flex flex-row bg-gray-100 dark:bg-neutral-800 rounded-lg p-1.5 gap-1",
+  variants: {},
+  defaults: {},
+});
+
+interface TabListProps
+  extends VariantProps<typeof TabListVariant>,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+const TabList = (props: TabListProps) => {
+  const [variantProps, restProps] = resolveTabListVariantProps(props);
+
+  return <div className={TabListVariant(variantProps)} {...restProps} />;
+};
+
+const [TabTriggerVariant, resolveTabTriggerVariantProps] = vcn({
+  base: "py-1.5 rounded-md flex-grow transition-all text-sm",
+  variants: {
+    active: {
+      true: "bg-white/100 dark:bg-black/100 text-black dark:text-white",
+      false:
+        "bg-white/0 dark:bg-black/0 text-black dark:text-white hover:bg-white/50 dark:hover:bg-black/50",
+    },
+  },
+  defaults: {
+    active: false,
+  },
+});
+
+interface TabTriggerProps
+  extends Omit<VariantProps<typeof TabTriggerVariant>, "active">,
+    React.HTMLAttributes<HTMLButtonElement>,
+    Tab,
+    AsChild {}
+
+const TabTrigger = (props: TabTriggerProps) => {
+  const [variantProps, restPropsBeforeParse] =
+    resolveTabTriggerVariantProps(props);
+  const { name, ...restProps } = restPropsBeforeParse;
+  const [context, setContext] = React.useContext(TabContext);
+
+  React.useEffect(() => {
+    setContext((prev) => {
+      return {
+        ...prev,
+        tabs: [...prev.tabs, { name }],
+      };
+    });
+
+    return () => {
+      setContext((prev) => {
+        return {
+          ...prev,
+          tabs: prev.tabs.filter((tab) => tab.name !== name),
+        };
+      });
+    };
+  }, [name]);
+
+  const Comp = props.asChild ? Slot : "button";
+
+  return (
+    <Comp
+      className={TabTriggerVariant({
+        ...variantProps,
+        active: context.active[1] === name,
+      })}
+      onClick={() =>
+        setContext((prev) => {
+          return {
+            ...prev,
+            active: [prev.tabs.findIndex((tab) => tab.name === name), name],
+          };
+        })
+      }
+      {...restProps}
+    />
+  );
+};
+
+const [tabContentVariant, resolveTabContentVariantProps] = vcn({
+  base: "",
+  variants: {},
+  defaults: {},
+});
+
+interface TabContentProps extends VariantProps<typeof tabContentVariant> {
+  name: string;
+  children: Exclude<
+    React.ReactNode,
+    string | number | boolean | Iterable<React.ReactNode> | null | undefined
+  >;
+}
+
+const TabContent = (props: TabContentProps) => {
+  const [variantProps, restPropsBeforeParse] =
+    resolveTabContentVariantProps(props);
+  const { name, ...restProps } = restPropsBeforeParse;
+  const [context] = React.useContext(TabContext);
+
+  if (context.active[1] === name) {
+    return (
+      <Slot
+        className={tabContentVariant({
+          ...variantProps,
+        })}
+        {...restProps}
+      />
+    );
+  } else {
+    return null;
+  }
+};
+
+export { TabProvider, useTabState, TabList, TabTrigger, TabContent };
diff --git a/src/pswui/components/Toast.tsx b/src/pswui/components/Toast.tsx
new file mode 100644
index 0000000..92e292a
--- /dev/null
+++ b/src/pswui/components/Toast.tsx
@@ -0,0 +1,337 @@
+import React, { useEffect, useId, useRef } from "react";
+import ReactDOM from "react-dom";
+import { VariantProps, vcn } from "@pswui-lib";
+
+interface ToastOption {
+  closeButton: boolean;
+  closeTimeout: number | null;
+}
+
+const defaultToastOption: ToastOption = {
+  closeButton: true,
+  closeTimeout: 3000,
+};
+
+const toastColors = {
+  background: "bg-white dark:bg-black",
+  borders: {
+    default: "border-black/10 dark:border-white/20",
+    error: "border-red-500/80",
+    success: "border-green-500/80",
+    warning: "border-yellow-500/80",
+    loading: "border-black/50 dark:border-white/50 animate-pulse",
+  },
+};
+
+const [toastVariant] = vcn({
+  base: `flex flex-col gap-2 border p-4 rounded-lg pr-8 pointer-events-auto ${toastColors.background} relative transition-all duration-150`,
+  variants: {
+    status: {
+      default: toastColors.borders.default,
+      error: toastColors.borders.error,
+      success: toastColors.borders.success,
+      warning: toastColors.borders.warning,
+      loading: toastColors.borders.loading,
+    },
+    life: {
+      born: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(0,.6,.7,1)]",
+      normal: "translate-y-0 scale-100 ease-[cubic-bezier(0,.6,.7,1)]",
+      dead: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(.6,0,1,.7)]",
+    },
+  },
+  defaults: {
+    status: "default",
+    life: "born",
+  },
+});
+
+interface ToastBody extends Omit<VariantProps<typeof toastVariant>, "preset"> {
+  title: string;
+  description: string;
+}
+
+let index = 0;
+let toasts: Record<
+  `${number}`,
+  ToastBody & Partial<ToastOption> & { subscribers: (() => void)[] }
+> = {};
+let subscribers: (() => void)[] = [];
+
+/**
+ * ====
+ * Controls
+ * ====
+ */
+
+function subscribe(callback: () => void) {
+  subscribers.push(callback);
+  return () => {
+    subscribers = subscribers.filter((subscriber) => subscriber !== callback);
+  };
+}
+
+function getSnapshot() {
+  return { ...toasts };
+}
+
+function subscribeSingle(id: `${number}`) {
+  return (callback: () => void) => {
+    toasts[id].subscribers.push(callback);
+    return () => {
+      toasts[id].subscribers = toasts[id].subscribers.filter(
+        (subscriber) => subscriber !== callback,
+      );
+    };
+  };
+}
+
+function getSingleSnapshot(id: `${number}`) {
+  return () => {
+    return {
+      ...toasts[id],
+    };
+  };
+}
+
+function notify() {
+  subscribers.forEach((subscriber) => subscriber());
+}
+
+function notifySingle(id: `${number}`) {
+  toasts[id].subscribers.forEach((subscriber) => subscriber());
+}
+
+function close(id: `${number}`) {
+  toasts[id] = {
+    ...toasts[id],
+    life: "dead",
+  };
+  notifySingle(id);
+}
+
+function update(
+  id: `${number}`,
+  toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>,
+) {
+  toasts[id] = {
+    ...toasts[id],
+    ...toast,
+  };
+  notifySingle(id);
+}
+
+function addToast(toast: Omit<ToastBody, "life"> & Partial<ToastOption>) {
+  const id: `${number}` = `${index}`;
+  toasts[id] = {
+    ...toast,
+    subscribers: [],
+    life: "born",
+  };
+  index += 1;
+  notify();
+
+  return {
+    update: (toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>) =>
+      update(id, toast),
+    close: () => close(id),
+  };
+}
+
+function useToast() {
+  return {
+    toast: addToast,
+    update,
+    close,
+  };
+}
+
+const ToastTemplate = ({
+  id,
+  globalOption,
+}: {
+  id: `${number}`;
+  globalOption: ToastOption;
+}) => {
+  const [toast, setToast] = React.useState<(typeof toasts)[`${number}`]>(
+    toasts[id],
+  );
+  const ref = React.useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    subscribeSingle(id)(() => {
+      setToast(getSingleSnapshot(id)());
+    });
+  }, []);
+
+  const toastData = {
+    ...globalOption,
+    ...toast,
+  };
+
+  React.useEffect(() => {
+    if (toastData.life === "born") {
+      requestAnimationFrame(() => {
+        // To make sure that the toast is rendered as "born" state
+        // and then change to "normal" state
+        toasts[id] = {
+          ...toasts[id],
+          life: "normal",
+        };
+        notifySingle(id);
+      });
+    }
+    if (toastData.life === "normal" && toastData.closeTimeout !== null) {
+      const timeout = setTimeout(() => {
+        close(id);
+      }, toastData.closeTimeout);
+      return () => clearTimeout(timeout);
+    }
+    if (toastData.life === "dead") {
+      let transitionDuration: {
+        value: number;
+        unit: string;
+      } | null;
+      if (!ref.current) {
+        transitionDuration = null;
+      } else if (ref.current.computedStyleMap !== undefined) {
+        transitionDuration = ref.current
+          .computedStyleMap()
+          .get("transition-duration") as { value: number; unit: string };
+      } else {
+        const style = /(\d+(\.\d+)?)(.+)/.exec(
+          window.getComputedStyle(ref.current).transitionDuration,
+        );
+        transitionDuration = style
+          ? {
+              value: parseFloat(style[1] ?? "0"),
+              unit: style[3] ?? style[2] ?? "s",
+            }
+          : null;
+      }
+      if (!transitionDuration) {
+        delete toasts[id];
+        notify();
+        return;
+      }
+      const calculatedTransitionDuration =
+        transitionDuration.value *
+        ({
+          s: 1000,
+          ms: 1,
+        }[transitionDuration.unit] ?? 1);
+      const timeout = setTimeout(() => {
+        delete toasts[id];
+        notify();
+      }, calculatedTransitionDuration);
+      return () => clearTimeout(timeout);
+    }
+  }, [toastData.life, toastData.closeTimeout, toastData.closeButton]);
+
+  return (
+    <div
+      className={toastVariant({
+        status: toastData.status,
+        life: toastData.life,
+      })}
+      ref={ref}
+    >
+      {toastData.closeButton && (
+        <button className="absolute top-2 right-2" onClick={() => close(id)}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.2rem"
+            height="1.2rem"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
+            />
+          </svg>
+        </button>
+      )}
+      <div className="text-sm font-bold">{toastData.title}</div>
+      <div className="text-sm">{toastData.description}</div>
+    </div>
+  );
+};
+
+const [toasterVariant, resolveToasterVariantProps] = vcn({
+  base: "fixed p-4 flex flex-col gap-4 top-0 right-0 w-full md:max-w-md md:bottom-0 md:top-auto pointer-events-none z-40",
+  variants: {},
+  defaults: {},
+});
+
+interface ToasterProps
+  extends React.ComponentPropsWithoutRef<"div">,
+    VariantProps<typeof toasterVariant> {
+  defaultOption?: Partial<ToastOption>;
+  muteDuplicationWarning?: boolean;
+}
+
+const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
+  const id = useId();
+  const [variantProps, otherPropsCompressed] =
+    resolveToasterVariantProps(props);
+  const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } =
+    otherPropsCompressed;
+
+  const [toastList, setToastList] = React.useState<typeof toasts>(toasts);
+  const internalRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const unsubscribe = subscribe(() => {
+      setToastList(getSnapshot());
+    });
+    return unsubscribe;
+  }, []);
+
+  const option = React.useMemo(() => {
+    return {
+      ...defaultToastOption,
+      ...defaultOption,
+    };
+  }, [defaultOption]);
+
+  const toasterInstance = document.querySelector("div[data-toaster-root]");
+  if (toasterInstance && id !== toasterInstance.id) {
+    if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
+      console.warn(
+        `Multiple Toaster instances detected. Only one Toaster is allowed.`,
+      );
+    }
+    return null;
+  }
+
+  return (
+    <>
+      {ReactDOM.createPortal(
+        <div
+          {...otherPropsExtracted}
+          data-toaster-root
+          className={toasterVariant(variantProps)}
+          ref={(el) => {
+            internalRef.current = el;
+            if (typeof ref === "function") {
+              ref(el);
+            } else if (ref) {
+              ref.current = el;
+            }
+          }}
+          id={id}
+        >
+          {Object.entries(toastList).map(([id]) => (
+            <ToastTemplate
+              key={id}
+              id={id as `${number}`}
+              globalOption={option}
+            />
+          ))}
+        </div>,
+        document.body,
+      )}
+    </>
+  );
+});
+
+export { Toaster, useToast };
diff --git a/src/pswui/components/Tooltip.tsx b/src/pswui/components/Tooltip.tsx
new file mode 100644
index 0000000..5dd0227
--- /dev/null
+++ b/src/pswui/components/Tooltip.tsx
@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
+
+interface TooltipContextBody {
+  position: "top" | "bottom" | "left" | "right";
+}
+
+const tooltipContextInitial: TooltipContextBody = {
+  position: "top",
+};
+const TooltipContext = React.createContext<
+  [TooltipContextBody, React.Dispatch<React.SetStateAction<TooltipContextBody>>]
+>([
+  tooltipContextInitial,
+  () => {
+    if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+      console.warn(
+        "It seems like you're using TooltipContext outside of a provider.",
+      );
+    }
+  },
+]);
+
+const [tooltipVariant, resolveTooltipVariantProps] = vcn({
+  base: "w-fit h-fit relative group/tooltip",
+  variants: {
+    position: {
+      top: "",
+      bottom: "",
+      left: "",
+      right: "",
+    },
+    controlled: {
+      true: "controlled",
+      false: "",
+    },
+    opened: {
+      true: "opened",
+      false: "",
+    },
+  },
+  defaults: {
+    position: "top",
+    controlled: false,
+    opened: false,
+  },
+});
+
+interface TooltipProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof tooltipVariant>,
+    AsChild {}
+
+const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
+  const [variantProps, rest] = resolveTooltipVariantProps(props);
+  const { asChild, ...extractedRest } = rest;
+  const contextState = useState<TooltipContextBody>({
+    ...tooltipContextInitial,
+    ...variantProps,
+  });
+
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <TooltipContext.Provider value={contextState}>
+      <Comp
+        ref={ref}
+        className={tooltipVariant(variantProps)}
+        {...extractedRest}
+      />
+    </TooltipContext.Provider>
+  );
+});
+
+const tooltipContentColors = {
+  variants: {
+    default:
+      "bg-white dark:bg-black border-neutral-200 dark:border-neutral-700",
+    error: "bg-red-400 dark:bg-red-800 border-red-500 text-white",
+    success: "bg-green-400 dark:bg-green-800 border-green-500 text-white",
+    warning: "bg-yellow-400 dark:bg-yellow-800 border-yellow-500",
+  },
+};
+
+const [tooltipContentVariant, resolveTooltipContentVariantProps] = vcn({
+  base: `absolute py-1 px-3 rounded-md border opacity-0 transition-all 
+  group-[:not(.controlled):hover]/tooltip:opacity-100 group-[.opened]/tooltip:opacity-100 
+  select-none pointer-events-none 
+  group-[:not(.controlled):hover]/tooltip:select-auto group-[.opened]/tooltip:select-auto group-[:not(.controlled):hover]/tooltip:pointer-events-auto group-[.opened]/tooltip:pointer-events-auto  
+  group-[:not(.controlled):hover]/tooltip:[transition:transform_150ms_ease-out_var(--delay),opacity_150ms_ease-out_var(--delay),background-color_150ms_ease-in-out,color_150ms_ease-in-out,border-color_150ms_ease-in-out]`,
+  variants: {
+    position: {
+      top: "bottom-[calc(100%+var(--tooltip-offset))] left-1/2 -translate-x-1/2 group-[:not(.controlled):hover]/tooltip:translate-y-0 group-[.opened]/tooltip:translate-y-0 translate-y-[10px]",
+      bottom:
+        "top-[calc(100%+var(--tooltip-offset))] left-1/2 -translate-x-1/2 group-[:not(.controlled):hover]/tooltip:translate-y-0 group-[.opened]/tooltip:translate-y-0 translate-y-[-10px]",
+      left: "right-[calc(100%+var(--tooltip-offset))] top-1/2 -translate-y-1/2 group-[:not(.controlled):hover]/tooltip:translate-x-0 group-[.opened]/tooltip:translate-x-0 translate-x-[10px]",
+      right:
+        "left-[calc(100%+var(--tooltip-offset))] top-1/2 -translate-y-1/2 group-[:not(.controlled):hover]/tooltip:translate-x-0 group-[.opened]/tooltip:translate-x-0 translate-x-[-10px]",
+    },
+    delay: {
+      none: "[--delay:0ms]",
+      early: "[--delay:150ms]",
+      normal: "[--delay:500ms]",
+      late: "[--delay:1000ms]",
+    },
+    offset: {
+      sm: "[--tooltip-offset:2px]",
+      md: "[--tooltip-offset:4px]",
+      lg: "[--tooltip-offset:8px]",
+    },
+    status: {
+      normal: tooltipContentColors.variants.default,
+      error: tooltipContentColors.variants.error,
+      success: tooltipContentColors.variants.success,
+      warning: tooltipContentColors.variants.warning,
+    },
+  },
+  defaults: {
+    position: "top",
+    offset: "md",
+    delay: "normal",
+    status: "normal",
+  },
+});
+
+interface TooltipContentProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Omit<VariantProps<typeof tooltipContentVariant>, "position"> {}
+
+const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
+  (props, ref) => {
+    const [variantProps, rest] = resolveTooltipContentVariantProps(props);
+    const [contextState] = React.useContext(TooltipContext);
+
+    return (
+      <div
+        ref={ref}
+        className={tooltipContentVariant({
+          ...variantProps,
+          position: contextState.position,
+        })}
+        {...rest}
+      />
+    );
+  },
+);
+
+export { Tooltip, TooltipContent };
diff --git a/src/pswui/lib.tsx b/src/pswui/lib.tsx
new file mode 100644
index 0000000..2f4d675
--- /dev/null
+++ b/src/pswui/lib.tsx
@@ -0,0 +1,353 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Takes a string, and returns boolean if it is "true" or "false".
+ * Otherwise, returns the string.
+ *
+ * @example
+ * ```
+ * type BooleanString = BooleanString<"true" | "false" | "other">
+ * // BooleanString = true | false | "other" = boolean | "other"
+ * ```
+ */
+type BooleanString<T extends string> = T extends "true"
+  ? true
+  : T extends "false"
+    ? false
+    : T;
+
+/**
+ * A type that represents a variant object.
+ *
+ * @example
+ * ```
+ * const variant: VariantType = {
+ *   opened: {
+ *     true: "opacity-100",
+ *     false: "opacity-0",
+ *   }
+ *   size: {
+ *     sm: "small",
+ *     md: "medium",
+ *     lg: "large",
+ *   },
+ *   color: {
+ *     red: "#ff0000",
+ *     green: "#00ff00",
+ *     blue: "#0000ff",
+ *   },
+ * }
+ * ```
+ */
+type VariantType = Record<string, Record<string, string>>;
+
+/**
+ * Takes VariantType, and returns a type that represents the variant object.
+ *
+ * @example
+ * ```
+ * const kvs: VariantKV<VariantType> = {
+ *   opened: true  // BooleanString<"true" | "false"> = boolean;
+ *   size: "sm"    // BooleanString<"sm" | "md" | "lg"> = "sm" | "md" | "lg";
+ *   color: "red"  // BooleanString<"red" | "green" | "blue"> = "red" | "green" | "blue";
+ * }
+ * ```
+ */
+type VariantKV<V extends VariantType> = {
+  [VariantKey in keyof V]: BooleanString<keyof V[VariantKey] & string>;
+};
+
+/**
+ * Takes VariantType, and returns a type that represents the preset object.
+ *
+ * @example
+ * ```
+ * const presets: PresetType<VariantType> = {
+ *   preset1: {
+ *     opened: true,
+ *     size: "sm",
+ *     color: "red",
+ *   },
+ *   preset2: {
+ *     opened: false,
+ *     size: "md",
+ *     color: "green",
+ *     className: "transition-opacity",
+ *   },
+ * }
+ * ```
+ */
+type PresetType<V extends VariantType> = {
+  [PresetName: string]: Partial<VariantKV<V>> & { className?: string };
+};
+
+/**
+ * A utility function to provide variants and presets to the component
+ *
+ * @param param - Variant Configuration
+ * @returns function (variantProps) -> class name,
+ * @returns function (anyProps) -> [variantProps, otherProps]
+ */
+export function vcn<V extends VariantType>(param: {
+  /**
+   * First definition: without presets
+   */
+  base?: string | undefined;
+  variants: V;
+  defaults: VariantKV<V>;
+  presets?: undefined;
+}): [
+  /**
+   * Variant Props -> Class Name
+   */
+  (
+    variantProps: Partial<VariantKV<V>> & {
+      className?: string;
+    },
+  ) => string,
+  /**
+   * Any Props -> Variant Props, Other Props
+   */
+  <AnyPropBeforeResolve extends Record<string, any>>(
+    anyProps: AnyPropBeforeResolve,
+  ) => [
+    Partial<VariantKV<V>> & {
+      className?: string;
+    },
+    Omit<AnyPropBeforeResolve, keyof Partial<VariantKV<V>> | "className">,
+  ],
+];
+export function vcn<V extends VariantType, P extends PresetType<V>>(param: {
+  /**
+   * Second definition: with presets
+   */
+  base?: string | undefined;
+  variants: V /* VariantType */;
+  defaults: VariantKV<V>;
+  presets: P;
+}): [
+  /**
+   * Variant Props -> Class Name
+   */
+  (
+    variantProps: Partial<VariantKV<V>> & {
+      className?: string;
+      preset?: keyof P;
+    },
+  ) => string,
+  /**
+   * Any Props -> Variant Props, Other Props
+   */
+  <AnyPropBeforeResolve extends Record<string, any>>(
+    anyProps: AnyPropBeforeResolve,
+  ) => [
+    Partial<VariantKV<V>> & {
+      className?: string;
+      preset?: keyof P;
+    },
+    Omit<
+      AnyPropBeforeResolve,
+      keyof Partial<VariantKV<V>> | "preset" | "className"
+    >,
+  ],
+];
+export function vcn<
+  V extends VariantType,
+  P extends PresetType<V> | undefined,
+>({
+  base,
+  variants,
+  defaults,
+  presets,
+}: {
+  base?: string | undefined;
+  variants: V;
+  defaults: VariantKV<V>;
+  presets?: P;
+}) {
+  return [
+    /**
+     * Takes any props (including className), and returns the class name.
+     * If there is no variant specified in props, then it will fallback to preset, and then default.
+     *
+     * @param variantProps - The variant props including className.
+     * @returns The class name.
+     */
+    (
+      variantProps: { className?: string; preset?: keyof P } & Partial<
+        VariantKV<V>
+      >,
+    ) => {
+      const { className, preset, ...otherVariantProps } = variantProps;
+
+      const currentPreset: P[keyof P] | null =
+        presets && preset ? (presets as NonNullable<P>)[preset] ?? null : null;
+      const presetVariantKeys: (keyof V)[] = Object.keys(currentPreset ?? {});
+      return twMerge(
+        base,
+        ...(
+          Object.entries(defaults) as [keyof V, keyof V[keyof V] & string][]
+        ).map<string>(([variantKey, defaultValue]) => {
+          // Omit<Partial<VariantKV<V>> & { className; preset; }, className | preset> = Partial<VariantKV<V>> (safe to cast)
+          // Partial<VariantKV<V>>[keyof V] => { [k in keyof V]?: BooleanString<keyof V[keyof V] & string> } => BooleanString<keyof V[keyof V]>
+
+          const directVariantValue: (keyof V[keyof V] & string) | undefined = (
+            otherVariantProps as unknown as Partial<VariantKV<V>>
+          )[variantKey]?.toString?.(); // BooleanString<> -> string (safe to index V[keyof V])
+
+          const currentPresetVariantValue:
+            | (keyof V[keyof V] & string)
+            | undefined =
+            !!currentPreset && presetVariantKeys.includes(variantKey)
+              ? (currentPreset as Partial<VariantKV<V>>)[
+                  variantKey
+                ]?.toString?.()
+              : undefined;
+
+          const variantValue: keyof V[keyof V] & string =
+            directVariantValue ?? currentPresetVariantValue ?? defaultValue;
+          return variants[variantKey][variantValue];
+        }),
+        (
+          currentPreset as Partial<VariantKV<V>> | null
+        )?.className?.toString?.(), // preset's classname comes after user's variant props? huh..
+        className,
+      );
+    },
+    /**
+     * Takes any props, parse variant props and other props.
+     * If `options.excludeA` is true, then it will parse `A` as "other" props.
+     * Otherwise, it will parse A as variant props.
+     *
+     * @param anyProps - Any props that have passed to the component.
+     * @returns [variantProps, otherProps]
+     */
+    <AnyPropBeforeResolve extends Record<string, any>>(
+      anyProps: AnyPropBeforeResolve,
+    ) => {
+      const variantKeys = Object.keys(variants) as (keyof V)[];
+
+      return Object.entries(anyProps).reduce(
+        ([variantProps, otherProps], [key, value]) => {
+          if (
+            variantKeys.includes(key) ||
+            key === "className" ||
+            key === "preset"
+          ) {
+            return [{ ...variantProps, [key]: value }, otherProps];
+          }
+          return [variantProps, { ...otherProps, [key]: value }];
+        },
+        [{}, {}],
+      ) as [
+        Partial<VariantKV<V>> & {
+          className?: string;
+          preset?: keyof P;
+        },
+        Omit<
+          typeof anyProps,
+          keyof Partial<VariantKV<V>> | "preset" | "className"
+        >,
+      ];
+    },
+  ];
+}
+
+/**
+ * Extract the props type from return value of `vcn` function.
+ *
+ * @example
+ * ```
+ * const [variantProps, otherProps] = vcn({ ... })
+ * interface Props
+ *   extends VariantProps<typeof variantProps>, OtherProps { ... }
+ *
+ * function Component(props: Props) {
+ *   ...
+ * }
+ * ```
+ */
+export type VariantProps<F extends (props: any) => string> = F extends (
+  props: infer P,
+) => string
+  ? P
+  : never;
+
+/**
+ * Merges the react props.
+ * Basically childProps will override parentProps.
+ * But if it is a event handler, style, or className, it will be merged.
+ *
+ * @param parentProps - The parent props.
+ * @param childProps - The child props.
+ * @returns The merged props.
+ */
+function mergeReactProps(
+  parentProps: Record<string, any>,
+  childProps: Record<string, any>,
+) {
+  const overrideProps = { ...childProps };
+
+  for (const propName in childProps) {
+    const parentPropValue = parentProps[propName];
+    const childPropValue = childProps[propName];
+
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (childPropValue && parentPropValue) {
+        overrideProps[propName] = (...args: unknown[]) => {
+          childPropValue?.(...args);
+          parentPropValue?.(...args);
+        };
+      } else if (parentPropValue) {
+        overrideProps[propName] = parentPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...parentPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = twMerge(parentPropValue, childPropValue);
+    }
+  }
+
+  return { ...parentProps, ...overrideProps };
+}
+
+/**
+ * Takes an array of refs, and returns a single ref.
+ *
+ * @param refs - The array of refs.
+ * @returns The single ref.
+ */
+function combinedRef<I>(refs: React.Ref<I | null>[]) {
+  return (instance: I | null) =>
+    refs.forEach((ref) => {
+      if (ref instanceof Function) {
+        ref(instance);
+      } else if (!!ref) {
+        (ref as React.MutableRefObject<I | null>).current = instance;
+      }
+    });
+}
+
+interface SlotProps {
+  children?: React.ReactNode;
+}
+export const Slot = React.forwardRef<any, SlotProps & Record<string, any>>(
+  (props, ref) => {
+    const { children, ...slotProps } = props;
+    const { asChild: _1, ...safeSlotProps } = slotProps;
+    if (!React.isValidElement(children)) {
+      console.warn(`given children "${children}" is not valid for asChild`);
+      return null;
+    }
+    return React.cloneElement(children, {
+      ...mergeReactProps(safeSlotProps, children.props),
+      ref: combinedRef([ref, (children as any).ref]),
+    } as any);
+  },
+);
+
+export interface AsChild {
+  asChild?: boolean;
+}