https://github.com/wsmd/ui-sketchbook
🎨 Experiments with various UI components and interactions
https://github.com/wsmd/ui-sketchbook
interaction-design javascript react ui-components ui-design user-interface
Last synced: over 1 year ago
JSON representation
🎨 Experiments with various UI components and interactions
- Host: GitHub
- URL: https://github.com/wsmd/ui-sketchbook
- Owner: wsmd
- Created: 2019-04-19T06:22:25.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-06T04:49:45.000Z (about 7 years ago)
- Last Synced: 2025-03-17T07:38:21.712Z (over 1 year ago)
- Topics: interaction-design, javascript, react, ui-components, ui-design, user-interface
- Language: JavaScript
- Homepage: https://ui-sketchbook.now.sh
- Size: 18.6 KB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ui-sketchbook
This repo contains personal experiments and proof-of-concepts for various UI components and interactions.
All experiments can be previewed by clicking the link below:
## Components
The Source code for all components is available under [`src/components`](https://github.com/wsmd/ui-sketchbook/tree/master/src/components/).
| Name | Preview | Code | Description |
| --------------- | :-----------------------------------------------------------------: | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `CounterButton` | [Preview](https://ui-sketchbook.now.sh/?selectedKind=CounterButton) | [Code](https://github.com/wsmd/ui-sketchbook/tree/master/src/components/CounterButton) | A custom button component with an animated counter. |
| `IconInput` | [Preview](https://ui-sketchbook.now.sh/?selectedKind=IconInput) | [Code](https://github.com/wsmd/ui-sketchbook/tree/master/src/components/IconInput) | A icon that transitions into a text input on focus with various interactive states such as loading, success, and error. |
| `DragSelect` | [Preview](https://ui-sketchbook.now.sh/?selectedKind=DragSelect) | [Code](https://github.com/wsmd/ui-sketchbook/tree/master/src/components/DragSelect) | A drag & select interaction. |
| `TabSwitcher` | [Preview](https://ui-sketchbook.now.sh/?selectedKind=TabSwitcher) | [Code](https://github.com/wsmd/ui-sketchbook/tree/master/src/components/TabSwitcher) | A tabs UI with an active tab indicator that re-positions and resizes itself based on the selected tab. |
## Notes
- The code in this repo is only a proof-of-concept around certain ideas and purely experimental. It is not optimized or ready for production use.
- All components were developed with Google Chrome and not guaranteed to be fully functional in other browsers. For best results, Preview the components in Google Chrome.