-
Notifications
You must be signed in to change notification settings - Fork 116
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
888886b
commit 04daba8
Showing
4 changed files
with
202 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| # @ark-ui/solid | ||
|
|
||
| `@ark-ui/solid` is an open-source UI component library designed to make building high-quality, accessible web applications easier. The library focuses on providing low-level UI components with an emphasis on accessibility, customization, and developer experience. | ||
|
|
||
| ## Key Features | ||
|
|
||
| - **Accessible**: Components in Ark UI are designed with accessibility in mind, adhering to WAI-ARIA design patterns and handling implementation details such as aria and role attributes, focus management, and keyboard navigation. | ||
| - **Headless**: Components are shipped without styles, giving developers full control over styling. | ||
| - **Customizable**: The open component architecture allows for customization and customization, providing granular access to each component part. | ||
| - **Powered by state machines**: Predictable, simplified, and robust component behavior. | ||
| - **Developer Experience**: The library provides a fully-typed API with a consistent and predictable experience. | ||
|
|
||
| ## Available Components | ||
|
|
||
| At the moment, `@ark-ui/solid`offers the following components: | ||
|
|
||
| - [Accordion](https://ark-ui.com/docs/solid/components/accordion) | ||
| - [Carousel](https://ark-ui.com/docs/solid/components/carousel) | ||
| - [Checkbox](https://ark-ui.com/docs/solid/components/checkbox) | ||
| - [Color Picker](https://ark-ui.com/docs/solid/components/color-picker) | ||
| - [Combobox](https://ark-ui.com/docs/solid/components/combobox) | ||
| - [Dialog](https://ark-ui.com/docs/solid/components/dialog) | ||
| - [Editable](https://ark-ui.com/docs/solid/components/editable) | ||
| - [Hover Card](https://ark-ui.com/docs/solid/components/hover-card) | ||
| - [Menu](https://ark-ui.com/docs/solid/components/menu) | ||
| - [Number Input](https://ark-ui.com/docs/solid/components/number-input) | ||
| - [Pagination](https://ark-ui.com/docs/solid/components/pagination) | ||
| - [Pin Input](https://ark-ui.com/docs/solid/components/pin-input) | ||
| - [Popover](https://ark-ui.com/docs/solid/components/popover) | ||
| - [Pressable](https://ark-ui.com/docs/solid/components/pressable) | ||
| - [Radio Group](https://ark-ui.com/docs/solid/components/radio-group) | ||
| - [Range Slider](https://ark-ui.com/docs/solid/components/range-slider) | ||
| - [Rating Group](https://ark-ui.com/docs/solid/components/rating-group) | ||
| - [Select](https://ark-ui.com/docs/solid/components/select) | ||
| - [Slider](https://ark-ui.com/docs/solid/components/slider) | ||
| - [Splitter](https://ark-ui.com/docs/solid/components/splitter) | ||
| - [Tabs](https://ark-ui.com/docs/solid/components/tabs) | ||
| - [Tags Input](https://ark-ui.com/docs/solid/components/tags-input) | ||
| - [Toast](https://ark-ui.com/docs/solid/components/toast) | ||
| - [Tooltip](https://ark-ui.com/docs/solid/components/tooltip) | ||
|
|
||
| ## Installation | ||
|
|
||
| To install `@ark-ui/solid`, run the following command: | ||
|
|
||
| ```bash | ||
| npm install @ark-ui/solid | ||
| ``` | ||
|
|
||
| or with yarn: | ||
|
|
||
| ```bash | ||
| yarn add @ark-ui/solid | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| To use a component from `@ark-ui/solid`, import it and include it in your application: | ||
|
|
||
| ```tsx | ||
| import { | ||
| Slider, | ||
| SliderControl, | ||
| SliderLabel, | ||
| SliderOutput, | ||
| SliderRange, | ||
| SliderThumb, | ||
| SliderTrack, | ||
| } from '@ark-ui/solid' | ||
| import { createSignal } from 'solid-js' | ||
|
|
||
| export const MySlider = () => { | ||
| const [value, setValue] = createSignal(30) | ||
|
|
||
| return ( | ||
| <Slider min={-50} max={50} value={value()} onChange={(e) => setValue(e.value)}> | ||
| <SliderLabel>Label</SliderLabel> | ||
| <SliderOutput>{value}</SliderOutput> | ||
| <SliderControl> | ||
| <SliderTrack> | ||
| <SliderRange /> | ||
| </SliderTrack> | ||
| <SliderThumb /> | ||
| </SliderControl> | ||
| </Slider> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ## Documentation | ||
|
|
||
| For more detailed documentation and examples, please visit the [official documentation](https://ark-ui.com/). | ||
|
|
||
| ## Contribution | ||
|
|
||
| We welcome contributions to `@ark-ui/solid`. Please read our [contributing guidelines](https://github.com/chakra-ui/ark/blob/main/CONTRIBUTING.md) for more information on how to contribute. | ||
|
|
||
| ## Licence | ||
|
|
||
| This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| # @ark-ui/vue | ||
|
|
||
| `@ark-ui/vue` is an open-source UI component library designed to make building high-quality, accessible web applications easier. The library focuses on providing low-level UI components with an emphasis on accessibility, customization, and developer experience. | ||
|
|
||
| ## Key Features | ||
|
|
||
| - **Accessible**: Components in Ark UI are designed with accessibility in mind, adhering to WAI-ARIA design patterns and handling implementation details such as aria and role attributes, focus management, and keyboard navigation. | ||
| - **Headless**: Components are shipped without styles, giving developers full control over styling. | ||
| - **Customizable**: The open component architecture allows for customization and customization, providing granular access to each component part. | ||
| - **Powered by state machines**: Predictable, simplified, and robust component behavior. | ||
| - **Developer Experience**: The library provides a fully-typed API with a consistent and predictable experience. | ||
|
|
||
| ## Available Components | ||
|
|
||
| At the moment, `@ark-ui/vue`offers the following components: | ||
|
|
||
| - [Accordion](https://ark-ui.com/docs/vue/components/accordion) | ||
| - [Checkbox](https://ark-ui.com/docs/vue/components/checkbox) | ||
| - [Color Picker](https://ark-ui.com/docs/vue/components/color-picker) | ||
| - [Combobox](https://ark-ui.com/docs/vue/components/combobox) | ||
| - [Dialog](https://ark-ui.com/docs/vue/components/dialog) | ||
| - [Editable](https://ark-ui.com/docs/vue/components/editable) | ||
| - [Hover Card](https://ark-ui.com/docs/vue/components/hover-card) | ||
| - [Menu](https://ark-ui.com/docs/vue/components/menu) | ||
| - [Number Input](https://ark-ui.com/docs/vue/components/number-input) | ||
| - [Pagination](https://ark-ui.com/docs/vue/components/pagination) | ||
| - [Pin Input](https://ark-ui.com/docs/vue/components/pin-input) | ||
| - [Popover](https://ark-ui.com/docs/vue/components/popover) | ||
| - [Pressable](https://ark-ui.com/docs/vue/components/pressable) | ||
| - [Radio Group](https://ark-ui.com/docs/vue/components/radio-group) | ||
| - [Range Slider](https://ark-ui.com/docs/vue/components/range-slider) | ||
| - [Rating Group](https://ark-ui.com/docs/vue/components/rating-group) | ||
| - [Select](https://ark-ui.com/docs/vue/components/select) | ||
| - [Slider](https://ark-ui.com/docs/vue/components/slider) | ||
| - [Splitter](https://ark-ui.com/docs/vue/components/splitter) | ||
| - [Tabs](https://ark-ui.com/docs/vue/components/tabs) | ||
| - [Tags Input](https://ark-ui.com/docs/vue/components/tags-input) | ||
| - [Tooltip](https://ark-ui.com/docs/vue/components/tooltip) | ||
|
|
||
| ## Installation | ||
|
|
||
| To install `@ark-ui/vue`, run the following command: | ||
|
|
||
| ```bash | ||
| npm install @ark-ui/vue | ||
| ``` | ||
|
|
||
| or with yarn: | ||
|
|
||
| ```bash | ||
| yarn add @ark-ui/vue | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| To use a component from `@ark-ui/vue`, import it and include it in your application: | ||
|
|
||
| ```vue | ||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| import { | ||
| Slider, | ||
| SliderControl, | ||
| SliderLabel, | ||
| SliderOutput, | ||
| SliderRange, | ||
| SliderThumb, | ||
| SliderTrack, | ||
| type SliderProps, | ||
| } from '@ark-ui/vue' | ||
| const sliderValue = ref<SliderProps['modelValue']>(30) | ||
| </script> | ||
| <template> | ||
| <Slider :min="-50" :max="50" v-model="sliderValue"> | ||
| <SliderLabel>Label</SliderLabel> | ||
| <SliderOutput>{{ sliderValue }}</SliderOutput> | ||
| <SliderControl> | ||
| <SliderTrack> | ||
| <SliderRange /> | ||
| </SliderTrack> | ||
| <SliderThumb /> | ||
| </SliderControl> | ||
| </Slider> | ||
| </template> | ||
| ``` | ||
|
|
||
| ## Documentation | ||
|
|
||
| For more detailed documentation and examples, please visit the [official documentation](https://ark-ui.com/). | ||
|
|
||
| ## Contribution | ||
|
|
||
| We welcome contributions to `@ark-ui/vue`. Please read our [contributing guidelines](https://github.com/chakra-ui/ark/blob/main/CONTRIBUTING.md) for more information on how to contribute. | ||
|
|
||
| ## Licence | ||
|
|
||
| This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
04daba8There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
ark-website – ./
ark-website-three.vercel.app
ark-website-git-main-chakra-ui.vercel.app
ark-website-chakra-ui.vercel.app
ark-ui.com