Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stacksjs/command-palette
⌘-k, or anything — Create beautiful, performant command palettes for your application.
https://github.com/stacksjs/command-palette
component-library composables headless typescript unocss vite vue web-components
Last synced: 3 months ago
JSON representation
⌘-k, or anything — Create beautiful, performant command palettes for your application.
- Host: GitHub
- URL: https://github.com/stacksjs/command-palette
- Owner: stacksjs
- License: mit
- Created: 2022-09-27T17:27:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-24T02:44:44.000Z (3 months ago)
- Last Synced: 2024-10-24T19:26:39.956Z (3 months ago)
- Topics: component-library, composables, headless, typescript, unocss, vite, vue, web-components
- Language: TypeScript
- Homepage:
- Size: 1.19 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
- awesome-stacks - Command Palette - `⌘ + k` for the web) (Official Stacks / Courses)
README
[![npm version][npm-version-src]][npm-version-href]
[![GitHub Actions][github-actions-src]][github-actions-href]
[](http://commitizen.github.io/cz-cli/)
# Command Palettes
Command Palettes, similar to kbar, are often used within applications. This library is to help create a custom & performant command palette for your application. Useful functions & headless components included.
🤖 **Zero-config, by design**
🎨 **Built-in animations**
🧙🏼♀️ **Fully customizable components**
✨ **Highly performant**
> _The simple way to to use & design `⌘-k` command palettes._
## Get Started
It's incredibly easy to get started with this Command Palette stack. Simply install either of the following packages, dependent on whether you want to use framework agnostic Web Components or Vue components.
```bash
npm install @stacksjs/command-palette-elements
npm install @stacksjs/command-palette-vue
```
## 🤖 Usage
Web Component usage
```html
```
Vue 2 & 3 usage
```vue
import CommandPalette from '@stacksjs/command-palette-vue'
```
You're developing your own command palette components and simply want to reuse the functions/composables?
Functions usage
```bash
npm install command-palette-fx
```
After you installed the command-palette library, you can then make of functions in the following way:
```ts
import { isDark, toggleDark } from 'command-palette-fx'
console.log('is dark mode?', isDark)
```
## 🧪 Testing
```bash
pnpm test
```
## 📈 Changelog
Please see our [releases](https://github.com/ow3org/command-palette/releases) page for more information on what has changed recently.
## 💪🏼 Contributing
Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.
## 🏝 Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
[Discussions on GitHub](https://github.com/ow3org/command-palette/discussions)
For casual chit-chat with others using this package:
[Join the Open Web Discord Server](https://discord.ow3.org)
## 📄 License
The MIT License (MIT). Please see [LICENSE](LICENSE.md) for more information.
Made with ❤️
[npm-version-src]: https://img.shields.io/npm/v/@stacksjs/command-palette-vue?style=flat-square
[npm-version-href]: https://npmjs.com/package/@stacksjs/command-palette-vue
[github-actions-src]: https://img.shields.io/github/workflow/status/ow3org/command-palette/CI/main?style=flat-square
[github-actions-href]: https://github.com/ow3org/command-palette/actions?query=workflow%3Aci