🚧🚧 This repo is under heavy development 🚧🚧

Features

• ⭐️ Beautiful by default
• 🎚 More than 12 different kinds of inputs available
• 🧐 Smart input type recognition
• 🔌 Easy-to-make plugins
• ✅ Keyboard accessible
• ⚡️ No setup necessary

Installation

npm i leva

Quick start

Simply call the useControls hook from anywhere in your app:

import { useControls } from "leva"

function MyComponent() {
  const { name, aNumber } = useControls({ name: "World", aNumber: 0 })
  
  return <div>Hey {name}, hello! {aNumber}</div>
}

Documentation

• Getting Started

• Inputs

• Configuration

• Styling

• Advanced: Controlled Inputs

• Advanced: Creating Plugins

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Andrew Prifer 🤔 💻

Aria 🤔

David

Ninja Keys

Keyboard shortcuts interface for your website. Working with Vanilla JS, Vue, React.

Demo

https://ninja-keys-demo.vercel.app/

Motivation

A lot of applications support that pattern, user hit ⌘+k (or ctrl+k) and search UI dialog appear I've seen recently in Notion, Slack, Linear, Vercel and Algolia, but I'm sure there are plenty more Also, there is a Apple Spotlight, Alfred and Raycast app that using this pattern too but different shortcuts There are already some libraries but they are too framework specific, like Laravel only or React only Althought, mine is not a silver bullet and if you need more framework integration, check them out too.

I was needed an keyboard interface for navigation for static website without any frameworks In same time I have a few vue projects where it can be useful too. So I decided to give first shot for Web Components and Lit…

React Spectrum Libraries

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

React Spectrum

A React implementation of Spectrum, Adobe’s design system. Spectrum provides adaptive, accessible, and cohesive experiences for all Adobe applications.

Explore React Spectrum

React Aria

A library of React Hooks that provides accessible UI primitives for your design system.

Learn more about React Aria

React Stately

A library of React Hooks that provides cross-platform state management for your design system.

More information about React Stately

Features

• ♿️ Accessible – Accessibility and behavior is implemented according to WAI-ARIA Authoring Practices, including full screen reader and keyboard navigation support. All components have been tested across a wide variety of screen readers and devices to ensure the best experience possible for all users.
• 📱 Adaptive – All components are designed to work with mouse, touch, and keyboard interactions. They’re built with responsive…