Sleek: a truly Sveltesque UI Component Library

Sleek is a Svelte UI component library designed to be minimal, flexible, and easy to use. The main inspiration is ofc Shadcn/ui, but with a focus on Svelte's unique capabilities and idioms.

Installation

WIP

Usage

<script>
  import { Button } from 'sleek';
</script>
<Button onclick={() => console.log('Clicked!')}>Click Me</Button>

Why Sleek?

• Sveltesque: Embraces Svelte's styling simplicity, you don't need to add anything to your project to use it (no Tailwind CSS).
• Minimal: Only includes essential components, no bloat.
• Flexible: You can use as an NPM package or import the component code directly with our cli tool (WIP).

Our friends at Flowbite Svelte are doing some amazing work, but I personally didn't want to use Tailwind CSS as it goes against the reason I picked Svelte in the first place.

Svelte solves the styling problem in a very elegant way, no more CSS-in-JS, no more Tailwind classes (and ugly code)... I wanted to build a library that embraces that philosophy, while bringing the composability of Shadcn/ui to Svelte.

Contributing to Sleek UI Components

Follow this minimal pattern for all UI components:

1. Types: Use types in types.ts for common properties (Size, etc.)
2. Component-specific types: Create in component's types.ts file
3. Wrapper pattern: Create reusable wrappers for shared behavior
4. Minimal props: Only expose what's absolutely necessary

Example Structure

component/
  ├── types.ts          # Component-specific interfaces
  ├── wrapper.svelte    # Shared behavior/styling
  └── variants.svelte   # Specific implementations

Button Example

• ButtonWrapper: Handles clicks, disabled state, sizing
• IconButton: Extends wrapper with icon display
• TextButton: Extends wrapper with text display

Use Size type for consistent sizing across components.