Shadcn UI

The theme uses Shadcn UI as a component library located at app/src/components/ui/, it's a collection of accessible, components that you can customize. Currently only several components are used in this theme, However you can add more components as you need.

Modified components

Carousel

Carousel component has been modified to fit the theme's design, it's located at app/src/components/ui/carousel. Below is new component added to carousel component:

function CarouselContentFull({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  const { carouselRef } = useCarousel();
  return (
    <div
      ref={carouselRef}
      data-slot="carousel-content"
      className="overflow-visible mx-auto max-w-(--content-width)"
    >
      <div className={cn('-ml-4 flex', className)} {...props} />
    </div>
  );
}

Basically it's just the same as CarouselContent but with max content width css variable and add overflow-visible to the content div.