https://github.com/steeze-ui/components

Effortless Svelte Components
https://github.com/steeze-ui/components

component-library components svelte sveltejs sveltekit

Last synced: 3 months ago
JSON representation

Effortless Svelte Components

• Host: GitHub
• URL: https://github.com/steeze-ui/components
• Owner: steeze-ui
• License: mit
• Created: 2022-01-18T17:59:43.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-06T12:22:38.000Z (over 2 years ago)
• Last Synced: 2024-09-30T09:40:51.185Z (4 months ago)
• Topics: component-library, components, svelte, sveltejs, sveltekit
• Language: Svelte
• Homepage: http://steeze-ui.com
• Size: 632 KB
• Stars: 31
• Watchers: 0
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
> Need Icons for your next SvelteKit project (heroicons, feather icons and more) ? Check out [@steeze-ui/icons](https://github.com/steeze-ui/icons)!

# Steeze UI

Components for SvelteKit Apps. Check out the [documentation](https://steeze-ui.com) for more info!

- Accessible

- Prestyled

- Themable

## Getting Started

### Installing

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

```bash

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`)

```html

	import '@steeze-ui/components/base.css'

```

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

### Use Components

```svelte

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

Submit

```

### 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:

```svelte

  import Switch from "@steeze-ui/components/core/parts/Switch.svelte"

  import Label from "@steeze-ui/components/core/parts/Label.svelte"

Switch me!

```

## Sponsors







## License

Distributed under the [MIT License](/LICENSE).