Bencho: UI Components & Source

01

Componentsfree

Canvas toolbar

A canvas toolbar animates tool selection and reveals additional shape choices.

by Bencho0React · TypeScriptSource

0

02

Componentsfree

Progress ticks

A progress indicator fills a sequence of ticks while its numeric percentage updates.

by Bencho0React · TypeScriptSource

0

03

Componentsfree

Now playing

A compact music player expands to reveal playback controls and animated playback feedback.

by Bencho0React · TypeScriptSource

0

04

Componentsfree

Pull to refresh

A portfolio card stretches downward during a pull gesture and refreshes its displayed balance.

by Bencho0React · TypeScriptSource

0

05

Componentsfree

Magnifying dock

Dock icons magnify as the pointer travels across them.

by Bencho0React · TypeScriptSource

0

06

Componentsfree

Checklist

Task rows animate checkmarks and completion feedback as they are checked and unchecked.

by Bencho0React · TypeScriptSource

0

07

Componentsfree

Dragging ball

A draggable ball follows the pointer and responds with spring-like motion.

by Bencho0React · TypeScriptSource

0

08

Componentsfree

Search

A search control expands into a text field and responds to typing and submission.

by Bencho0React · TypeScriptSource

0

09

Componentsfree

Slide to confirm

A sliding handle moves across its track to confirm an action and display completion feedback.

by Bencho0React · TypeScriptSource

0

10

Componentsfree

Carousel

Cards slide through a horizontally draggable carousel.

by Bencho0React · TypeScriptSource

0

11

Componentsfree

Magnetic select

Rounded options shift and stretch with magnetic motion as the selected shape changes.

by Bencho0React · TypeScriptSource

0

12

Componentsfree

Assignees

An assignee picker opens a list and animates selected people into its compact trigger.

by Bencho0React · TypeScriptSource

0

13

Componentsfree

Aspect ratio

An aspect-ratio selector transitions among landscape, square, and portrait states.

by Bencho0React · TypeScriptSource

0

14

Componentsfree

Radial menu

An Add button opens a fan of tools arranged in a radial menu.

by Bencho0React · TypeScriptSource

0

15

Componentsfree

Slosh slider

A slider changes its fill and value with a fluid sloshing response.

by Bencho0React · TypeScriptSource

0

16

Componentsfree

Selection list

A selection list animates selected people and updates the number of pending requests.

by Bencho0React · TypeScriptSource

0

17

Componentsfree

Liquid toggle

A switch changes state with a fluid deformation of its thumb and track.

by Bencho0React · TypeScriptSource

0

18

Componentsfree

Command bar

A compact command field expands and animates its action controls while text is entered.

by Bencho0React · TypeScriptSource

0

19

Componentsfree

Inline confirm

A delete action expands into an inline confirmation before returning to its compact state.

by Bencho0React · TypeScriptSource

0

20

Componentsfree

Notify

A notification button changes from its initial state to an animated notification confirmation.

by Bencho0React · TypeScriptSource

0

21

Componentsfree

Drag stepper

A numeric stepper changes its value through dragging and increment or decrement actions.

by Bencho0React · TypeScriptSource

0

22

Componentsfree

Escape button

A playful button moves away from the approaching pointer.

by Bencho0React · TypeScriptSource

0

23

Componentsfree

Palette

A palette generator transitions to a new set of colors.

by Bencho0React · TypeScriptSource

0

24

Componentsfree

Reorder list

List items move into a new order as a row is dragged between positions.

by Bencho0React · TypeScriptSource

0

25

Componentsfree

Wheel

A rotary wheel adjusts a humidity percentage with animated circular feedback.

by Bencho0React · TypeScriptSource

0

26

Componentsfree

Create menu

A Create button fluidly expands into a menu of document, spreadsheet, board, and folder actions.

by Bencho0React · TypeScriptSource

0

27

Componentsfree

Tilt card

A card tilts in response to pointer movement, with coordinated lighting and shadow changes.

by Bencho0React · TypeScriptSource

0

28

Componentsfree

Icon bar

A row of navigation icons animates its active selection and pointer feedback.

by Bencho0React · TypeScriptSource

0

29

Componentsfree

Range dial

A circular range control adjusts the start and end of a sleep window while updating its duration.

by Bencho0React · TypeScriptSource

0

Bencho

Source specialties

29 Components

Canvas toolbar

Progress ticks

Now playing

Pull to refresh

Magnifying dock

Checklist

Dragging ball

Search

Slide to confirm

Carousel

Magnetic select

Assignees

Aspect ratio

Radial menu

Slosh slider

Selection list

Liquid toggle

Command bar

Inline confirm

Notify

Drag stepper

Escape button

Palette

Reorder list

Wheel

Create menu

Tilt card

Icon bar

Range dial