@raycast-community/ui
v0.1.1
Published
Components and Utils for Raycast extensions
Downloads
17
Readme
RaycastUI
Ready to use Raycast Components.
The components are based on native Raycast components (@raycast/api
), but they are offer more functionality.
Some components are specifically designed for particular use cases, such as MenuBarExtra.RootOnly
.
⚠️ This is not(!) an official Raycast library ⚠️
Why RaycastUI?
Raycast's native components are awesome, and you can build a lot of stuff with them.
After developing many extensions, I found myself rebuilding the same components repeatedly.
While some parts may eventually be added to the native components over time, some are out of the scope of @raycast/api
in my opinion.
This library is here to address these needs.
How to install
npm install @raycast-community/ui
Requirements
Minimum Raycast API version 1.64.0
. The minimum version may increase over time to support the latest features.
Versioning
This library is still in development. I try not to break existing features, but it can happen.
I would recommend setting the @raycast-community/ui
in package.json
to ~
(for only upgrading the fix versions) for now, instead of the common ^
prefix (which automatically updates every minor version)!
e.g. "@raycast-community/ui": "~0.1"
How to use
The components are mainly structured as you know them from Raycast itself and can be used mixed with native components.
Mixing with @raycast/api
You can mix the components with the native ones. It is recommended to prefix the component upon import to avoid naming collision when mixing Raycast native components with RaycastUI components.
This can be done in various ways like following ...
import * as rui from "@raycast-community/ui";
import { Action as RUIAction } from "@raycast-community/ui";
import { Action as RCAction } from "@raycast/api"; // alias Raycast native components
import { Action } from "@raycast-community/ui"; // use RaycastUI without alias
Reference
You can find an API reference for all components here
Examples
Check out the test commands in this repository to see how to use the components.
You can clone this repository and build it yourself to play around with different components from the library.
Numeric Action Example
import { ActionPanel, List } from "@raycast/api";
import { Action } from "@raycast-community/ui";
export default function Command() {
return (
<List>
<List.Section title="Actions">
<List.Item
title="Numeric"
actions={
<ActionPanel>
<Action.Numeric
title="Choose Number From predefined List"
limits={{ min: { value: 2 }, max: { value: 8 } }}
predefined={[2, 3, 4, 5, 6, 7, 8]}
onValueChanged={(v) => console.log(`Number changed to ${v}`)}
/>
</ActionPanel>
}
/>
</List.Section>
</List>
);
}
Menu Command Example
import { LaunchType, showHUD } from "@raycast/api";
import { MenuBarExtra } from "@raycast-community/ui";
export default function MenuCommand() {
return (
<MenuBarExtra title="Raycast UI Menu Command">
<MenuBarExtra.Item
title={`${"#".repeat(100)}`}
textLimits={{ maxLength: 10 }}
onAction={() => showHUD("Child Menu from Menubar")}
/>
<MenuBarExtra.Item title="Test Item" />
<MenuBarExtra.Section title="A Section" subtitle="Section Subtitle">
<MenuBarExtra.Item title="Section Item 1" />
</MenuBarExtra.Section>
<MenuBarExtra.OpenInBrowser url="https://www.raycast.com" />
<MenuBarExtra.LaunchCommand
title="Launch Command"
command={{
name: "test",
type: LaunchType.UserInitiated,
}}
/>
<MenuBarExtra.Submenu title="Submenu">
<MenuBarExtra.Item title="Submenu Item" />
</MenuBarExtra.Submenu>
<MenuBarExtra.ConfigureCommand />
<MenuBarExtra.ConfigureExtension />
<MenuBarExtra.OpenInBrowser url="https://www.raycast.com" />
</MenuBarExtra>
);
}
Development
To build the library you need to call npm ci && npm run build
.
Go to the tests directory and build it to be able to test the components. Don't forget to build the library first before using the tests!
Build it via cd tests && npm ci && npm run build