https://github.com/stuymedova/uikit-svelte

[WIP] UI Component Library
https://github.com/stuymedova/uikit-svelte

component-library svelte svelte-components sveltejs ui ui-components ui-kit uikit

Last synced: 2 months ago
JSON representation

[WIP] UI Component Library

• Host: GitHub
• URL: https://github.com/stuymedova/uikit-svelte
• Owner: stuymedova
• Created: 2022-02-21T19:15:46.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-09T11:09:55.000Z (over 1 year ago)
• Last Synced: 2024-10-10T12:30:53.524Z (2 months ago)
• Topics: component-library, svelte, svelte-components, sveltejs, ui, ui-components, ui-kit, uikit
• Language: Svelte
• Homepage: https://www.npmjs.com/package/@stuymedova/uikit-svelte
• Size: 316 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# UIKit Svelte

> ⚠️ WIP, not ready for production

UIKit Component Library provides views, controls, and layout structures for declaring your app’s user interface, as well as utility functions to augment their behaviour. It comes with fully customizable styles and built-in accessibility support. This makes it a great tool to integrate with your software product.

## Installation and Usage

**Installation**

Run in terminal:

```

npm i @stuymedova/uikit-svelte

```

**Usage**

Usage instructions can be found in each component's corresponding guide.

## Component Library

| Type                | Component                   | Source and Documentation                                                    | Preview                                                                          |

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

| ***Accessibility*** | VisuallyHidden              | [Link](src/lib/components/accessibility/VisuallyHidden) (Doc. TBD)          | TBD                                                                              |

|                     | HiddenFromScreenReaders     | [Link](src/lib/components/accessibility/HiddenFromScreenReaders) (Doc. TBD) | TBD                                                                              |

| ***Controls***      | Button                      | [Link](src/lib/components/controls/Button)                                  | [Link](https://uikit-svelte.vercel.app/components/controls/button)               |

|                     | Disclosure*                 | [Link](src/lib/components/controls/Disclosure) (Doc. TBD)                   | [Link](https://uikit-svelte.vercel.app/components/controls/disclosure)           |

|                     | Link                        | [Link](src/lib/components/controls/Link)                                    | [Link](https://uikit-svelte.vercel.app/components/controls/link)                 |

|                     | Popover*                    | [Link](src/lib/components/controls/Popover) (Doc. TBD)                      | [Link](https://uikit-svelte.vercel.app/components/controls/popover)              |

|                     | SegmentedControl            | [Link](src/lib/components/controls/SegmentedControl)                        | [Link](https://uikit-svelte.vercel.app/components/controls/segmented-control)    |

|                     | Stepper                     | [Link](src/lib/components/controls/Stepper)                                 | [Link](https://uikit-svelte.vercel.app/components/controls/stepper)              |

|                     | Switch                      | [Link](src/lib/components/controls/Switch)                                  | [Link](https://uikit-svelte.vercel.app/components/controls/switch)               |

|                     | TabView                     | [Link](src/lib/components/controls/TabView)                                 | [Link](https://uikit-svelte.vercel.app/components/controls/tab-view)             |

| ***Layout***        | TBD                         | TBD                                                                         | TBD                                                                              |

| ***Media***         | Symbol                      | [Link](src/lib/components/media/Symbol)                                     | [Link](https://uikit-svelte.vercel.app/components/media/symbol)                  |

| ***Utilities***     | ConditionalWrapper          | [Link](src/lib/components/utilities/ConditionalWrapper)                     | TBD                                                                              |

|                     | Wrapper                     | [Link](src/lib/components/utilities/Wrapper)                                | TBD                                                                              |

\* Components are being worked on and need improvement.

## Functions

| Type            | Function     | Source (Documentation TBD)                       | Preview    |

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

| ***Gestures***  | longPress    | [Link](src/lib/functions/gestures/longPress)     | TBD        |

|                 | pressOutside | [Link](src/lib/functions/gestures/pressOutside)  | TBD        |

| ***Utilities*** | applyAction  | [Link](src/lib/functions/utilities/applyAction)  | No preview |

|                 | applyActions | [Link](src/lib/functions/utilities/applyActions) | No preview |

## Symbols and Styles

Default ones are provided under the System Display (`src/lib/assets/system-display`) directory. It's expected for users to customize them as necessary and provide under a custom directory.