Sveltekit Components

aftongauntlett

Download

SvelteKit Components

A clean, accessible component library for SvelteKit projects.

Features

Svelte + Vite for lightning-fast builds and smooth DX
Tailwind CSS v4.1 with fluid clamp()-based spacing and typography
Custom Theming via HSL-based CSS variables
HSL Color Sync Script with VSCode-friendly HEX preview file
Reusable Components (e.g. Button, Card, Section)
TypeScript Support with generated .d.ts files via vite-plugin-dts
Designed to be consumed via local or npm-based import
Lightweight, dependency-free output

Getting Started

1. Clone the Repo

git clone https://github.com/aftongauntlett/sveltekit-components.git
cd sveltekit-components

2. Install Dependencies

npm install

3. Build the Library

npm run build

This generates a clean dist/ folder with index.js, index.cjs, and index.d.ts.

Theming & HSL Sync

This project uses a modern HSL-based theme system for consistent color theming across projects. Because HSL values aren’t directly editable in the VSCode color picker, this repo includes a color-preview.css file with HEX equivalents, then syncs to real HSL-based CSS variables via a helper script.

Workflow:

Use VSCode’s color picker to edit HEX values in color-preview.css
Run the sync script to update theme.css with equivalent HSL values
All components reference var(--color-...) HSL variables

Manual sync:

npm run sync-theme

Watch mode (auto-sync on save):

npm run watch-theme

Folder Structure (Relevant Parts)

src/
  components/
    Button.svelte
  theme.css             # Real CSS variable theme
  app.css               # Tailwind + theme imports
  index.ts              # Export entry for build

Intended Usage

This is a reusable, themable component library built to be consumed by SvelteKit projects. To use it locally:

In your consuming app:

pnpm link ../sveltekit-components

Or install via GitHub in package.json:

"dependencies": {
  "sveltekit-components": "github:aftongauntlett/sveltekit-components"
}

Import like:

import { Button } from "sveltekit-components";

License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Recommended IDE Setup

VS Code + Svelte

Top categories