TXEV Components Svelte

Easily build sleek, minimalistic web apps with this easy to use and powerful svelte component library.

WIP: Early stage of development, no documentation as of right now. Many things may drastically change without notice.

Contents

• Features
• Getting Started
  • Install
    • Template
      • Svelte
      • Sapper
      • Routify
    • CDN
    • NPM
    • Yarn
    • Svelte REPL
  • Usage

Features

Note: not all features on this list are implemented yet. You can check the src/components/ directory if you want to find out if the component you want exists.

• Build sleek, minimalistic websites and webapps using the Svelte framework/compiler (this is a Svelte component library)
• Everything works right out of the box
  • Unlike many other svelte component libraries, you don't need to insert an external css file since it fully utilises the single file component nature of svelte. [OPTIONAL FEATURE]
  • You can still disable certain component styles if you want to further customize these components by adding the styled prop.
• Dark and light theme support
• Built-in router

Getting Started

Install

Template

You can use degit to clone a starting template. All these templates support TypeScript (disabled by default).

To enable typescript for svelte and sapper template, simply run

node scripts/setupTypeScript.js

BEFORE npm install

To enable Typescript for Routify, run

npx routify-ts convert [project-directory]

BEFORE npm install

Svelte

The default svelte project

npx degit "TXEV/txev-components-svelte#template-svelte" [projectname]
cd [projectname]
npm install

Sapper

Sapper is an application framework powered by Svelte

npx degit "TXEV/txev-components-svelte#template-sapper" [projectname]
cd [projectname]
npm install

Routify

Routify offers a great developer experience to build the routes for your Svelte app.

npx degit "TXEV/txev-components-svelte#template-routify" [projectname]
cd [projectname]
npm install

CDN

via UNPKG: unpkg.com/txev-components-svelte@:version/src/index.js

• Replace :version with the version of this library you want. eg. 1.0.0
  • See package.json["version"] if you want to know what the latest stable version is

NPM

npm i txev-components-svelte -D # -D will save to your devDependencies

Yarn

yarn add txev-components-svelte --dev

Svelte REPL

You can use this library in the Svelte REPL as well by simply importing it when you need it.

<!-- App.svelte -->
<script>
    // import whatever components you want/need
    import { Accordion, Badge, Button } from "txev-components-svelte";
</script>

<!-- Content here -->

Usage

1. Install it (see above)
2. When you want to use it, import the components you want to use

<!-- App.svelte (or wherever you want to use the library) -->
<script>
    import { Button, Badge } from "txev-components-svelte";

    let count = 0;
</script>

<Button color="blue" on:click={() => count += 1}>Hello World</Button>

<Badge color="black">Clicked {count} time(s)</Badge>