https://github.com/synw/snowind

A Vuejs 3 Tailwindcss design system
https://github.com/synw/snowind

Last synced: 6 months ago
JSON representation

A Vuejs 3 Tailwindcss design system

• Host: GitHub
• URL: https://github.com/synw/snowind
• Owner: synw
• License: mit
• Created: 2021-06-22T14:03:51.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-09-06T09:56:41.000Z (over 1 year ago)
• Last Synced: 2024-12-01T10:10:48.160Z (6 months ago)
• Language: Vue
• Size: 611 KB
• Stars: 6
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
#  Snowind

Snowind is a set of tools for Vuejs 3 and Tailwindcss to help create a design system. It is composed

of a Tailwindcss plugin and some Vuejs 3 components

- **Consistent design system**: the widgets rely on a default high level customizable set of 

[semantic colors](https://github.com/synw/tailwindcss-semantic-colors)

- **Dark mode support**: dark mode is fully supported out of the box 

:books: [Documentation](https://synw.github.io/snowind/) | :computer: [Starter template](https://github.com/synw/snowind-template)

## Available packages

### Tailwind plugin

| Version | Name | Description |

| --- | --- | --- |

| [![pub package](https://img.shields.io/npm/v/@snowind/plugin)](https://www.npmjs.com/package/@snowind/plugin) | [@snowind/plugin](https://synw.github.io/snowind/install) | The base plugin with color shemes and css utilities |

### Widgets

| Version | Name | Description |

| --- | --- | --- |

| [![pub package](https://img.shields.io/npm/v/@snowind/sidebar)](https://www.npmjs.com/package/@snowind/sidebar) | [@snowind/sidebar](https://synw.github.io/snowind/sidebar) | An expandable sidebar |

| [![pub package](https://img.shields.io/npm/v/@snowind/switch)](https://www.npmjs.com/package/@snowind/switch) | [@snowind/switch](https://synw.github.io/snowind/switch) | A switch widget |

| [![pub package](https://img.shields.io/npm/v/@snowind/stepper)](https://www.npmjs.com/package/@snowind/stepper) | [@snowind/stepper](https://synw.github.io/snowind/stepper) | A progress stepper |

### Mobile

| Version | Name | Description |

| --- | --- | --- |

| [![pub package](https://img.shields.io/npm/v/@snowind/header)](https://www.npmjs.com/package/@snowind/header) | [@snowind/header](https://synw.github.io/snowind/header) | A responsive header with a mobile menu widget |

### State management

| Version | Name | Description |

| --- | --- | --- |

| [![pub package](https://img.shields.io/npm/v/@snowind/state)](https://www.npmjs.com/package/@snowind/state) | [@snowind/state](https://synw.github.io/snowind/state/screen) | State management primitives: screen size, user preferences |

| [![pub package](https://img.shields.io/npm/v/@snowind/subviews)](https://www.npmjs.com/package/@snowind/subviews) | [@snowind/subviews](https://synw.github.io/snowind/state/subviews) | Local reactive subviews |