Style your Website

SwiftyLaunch utilizes Tailwind together with shadcn/ui components to style your website. Out of the box, it also generates a bunch of custom CSS variables that you can use in code.

Default Variables

By providing an accent color during project setup, SwiftyLaunch will generate a bunch of CSS variables out of it, that you can use in your code.

Here are all the variables that are generated (Note that all of these were generated out of the #3774E6 accent color):

You can use these variables in code like this:

export default function Home() {
  return (
    <div className="bg-background-secondary p-4 rounded-lg font-semibold border border-tertiary">
      <h1 className="text-accent">Hello World</h1>
      <h1 className="text-accent-secondary">Hello World</h1>
    </div>
  );
}

This will render the following:

Predefined Buttons

We use shadcn/ui's button to make a reusable, stylable and accessible button component. It is defined in src/components/ui/button.tsx. and can be used like this:

import { Button } from "@/components/ui/button";
 
<Button>Click me</Button>;

You can also apply custom styles and sizes to make the button look just right

import { Button } from "@/components/ui/button";
<div>
  <Button>Hello World</Button>
  <Button size="lg">Hello World</Button>
  <Button size="xl" variant={"destructive"}>
    Destructive Button
  </Button>
  <Button size="sm" variant={"outline"}>
    Outline Button
  </Button>
</div>;

This will render the following:

You can see all available sizes, variants and styles in the src/components/ui/button.tsx file.