Installation & Setup

Integrate the cset-ui component library into your SvelteKit project using Tailwind CSS v4.

1 Install via Git Tag

Managed directly via the official GitHub repository. Install release v0.4.0:

Terminal

pnpm add github:cset-cbt/cset-ui#v0.4.0

2 Configure CSS with Tailwind v4

In src/app.css, import the cset-ui stylesheet immediately after @import "tailwindcss";. The package automatically declares @source for Tailwind class detection:

src/app.css

@import "tailwindcss";
@import "cset-ui/styles.css";

3 Anti-Flash Theme Script

Add the following script to src/app.html to read the active theme from localStorage and apply it prior to first render:

src/app.html

<!-- Thêm đoạn script chống chớp theme vào thẻ <head> của app.html -->
<script>
  try {
    var t = localStorage.getItem('cset-theme');
    document.documentElement.dataset.theme =
      t === 'light' || t === 'dark'
        ? t
        : matchMedia('(prefers-color-scheme: dark)').matches
          ? 'dark'
          : 'light';
  } catch (e) {}
</script>

4 Using Components

Import components directly from the cset-ui package:

src/routes/+page.svelte

<script lang="ts">
  import { Button, Select, Card, PageHeader } from 'cset-ui';
</script>

<Card>
  <PageHeader eyebrow="CSET" title="Xin chào" />
  <Button type="button">Bắt đầu</Button>
</Card>