steeze-ui / components

Effortless Svelte Components

Need Icons for your next SvelteKit project (heroicons, feather icons and more) ? Check out @steeze-ui/icons!

Steeze UI

Components for SvelteKit Apps. Check out the documentation for more info!

• Accessible
• Prestyled
• Themable

Getting Started

Installing

Install the package as dev dependency via pnpm, npm or yarn

pnpm i -D @steeze-ui/components

Base Styles

Once you've installed the package, you can import the base styles which consists of basic normalization and custom properties that most components are using (e.g colors or font sizes)

<script>
	import '@steeze-ui/components/base.css'
</script>

You can easily override the custom properties and define your own design system

Use Components

<script>
  import {Select, TextField, Button, Toggle} from "@steeze-ui/components"
</script>

<Select items={[{id:1,label:"Label 1"}]}>
<TextField label="Text Field" value="Text" />
<Toggle checked />
<Button theme="primary" type="submit">Submit</Button>

Use Underlying Parts

Some components share the same parts, like both Select and TextField use the Label Component or the Toggle Component is just a styled and more user-friendly version of the Switch Component. By design you can use these parts via deep imports from the core/parts folder:

<script>
  import Switch from "@steeze-ui/components/core/parts/Switch.svelte"
  import Label from "@steeze-ui/components/core/parts/Label.svelte"
</script>

<Label for="switch">Switch me!</Label>
<Switch id="switch" checked />

Sponsors

License

Distributed under the MIT License.