Skip to main content

Components

SavvyCal Components are designed to be copied and pasted directly into your application, similar to modern UI kits like Catalyst and shadcn. This allows you to weave SavvyCal-powered functionality seamlessly into your existing UI, without resorting to messy CSS overrides to force third-party elements to look like your own.

Prerequisites​

We've build the components to require minimal external dependencies.

  • Tailwind CSS: Components are styled with Tailwind CSS.
  • React: Components are built with React. We may support other frameworks in the future.
  • TanStack Query: Components use TanStack Query for data fetching.

Prepare your app​

Install dependencies​

Add the following dependencies to your project:

npm install clsx @tanstack/react-query \
  @savvycal/appointments-core @savvycal/appointments-react-query \
  @savvycal/appointments-utils

Set up your app root​

Ensure the <QueryClientProvider> and <SavvyCalProvider> components are present in your app's root component.

If you are making requests to API endpoints that require authentication, you'll need to pass the fetchAccessToken prop to the <SavvyCalProvider> component. This should be a function that returns a JSON Web Token (JWT) generated by your backend for the user who is currently authenticated (see docs on how to construct JWTs). Since JWTs are short-lived, fetchAccessToken will be called any time the token expires.

If you're only making requests to public endpoints, you can omit the fetchAccessToken prop.

// src/App.tsx

import { useMemo } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { SavvyCalProvider } from "@savvycal/appointments-react-query";

const queryClient = new QueryClient();

function App() {
  const fetchAccessToken = useMemo(async () => {
    const response = await fetch("/access_token");

    if (!response.ok) {
      const { error } = await response.json();
      console.error("An error occurred: ", error);
      return undefined;
    } else {
      const { accessToken } = await response.json();
      return accessToken;
    }
  }, []);

  return (
    <QueryClientProvider client={queryClient}>
      <SavvyCalProvider fetchAccessToken={fetchAccessToken}>
        {/* ... */}
      </SavvyCalProvider>
    </QueryClientProvider>
  );
}

Start using the components​

You're now ready to use the components. Browse the docs below to learn how to use each component.