Skip to content
Log inGet started
← All AI Kits
Desktop preview of the original Orbit Raycast-inspired AI Kit system
Pro AI Kit

Raycast-inspired Keyboard Orbit

An unofficial Raycast-inspired product and SaaS system with original visual flow, conversion hierarchy, responsive product storytelling, and focused adaptive elements across every Frontend Forever category.

Raycast-inspired Interface Elements

41 related components

Use this system

Build with this AI Kit in four steps

01

Choose the right kit

Review its screenshots, visual direction, and component collection before you commit to the system.

02

Read the guidance

Start with the implementation instructions and use the tokens as the shared language for every screen.

03

Wire up the code

Bring in the Tailwind or CSS layer once, then adapt it to the framework and structure already in your project.

04

Build from the collection

Reuse the kit's approved elements and compare the result with the screenshots and walkthrough as you iterate.

Unlock the complete AI Kit

Instructions, design tokens, Tailwind, CSS, and the website walkthrough video are available to Starter and Super members.

Log in to continue

Website walkthrough

See the design in motion

Pro walkthrough video

Upgrade to watch the complete website experience.

Component collection

Build with the same system

Every component below belongs to this AI Kit's assigned collection.

Release actions / Orbit

Publish the spring page

One focused release path, one quiet preview path, and a status that follows the action.

Publish pageOpen preview•••

Ready for a final review.

0
0

Raycast-inspired release-actions

Page title / Orbit

Name a page without losing the thread

Use a short title that stays easy to scan in the project rail.

Title is ready to use.

0
0

Raycast-inspired page-title

Collaboration / Orbit

Keep reviewers in sync

Live preview updates stay on until the release is ready for sign-off.

Sync review link

Share the latest saved state with the team.

Review link sync is on.

0
0

Raycast-inspired collaboration

Audience / Orbit

Choose who sees the first draft

The audience controls the tone of the next publishing check.

Internal team selected.

0
0

Raycast-inspired audience

Project brief / Orbit

Start a focused project brief

Capture the one sentence that gives collaborators a useful place to begin.

Create briefClear

No brief created yet.

0
0

Raycast-inspired project-brief

Workspace search / Orbit

Search the local workspace preview; press Command or Control K to jump here.

⌕

3 projects available.

0
0

Raycast-inspired workspace-search

Schedule picker / Orbit

Schedule a review moment

Select a day that gives the team enough space to read the story.

Thu, May 1414:00 · 30 min
May 202611121314151617

Review set for Thursday, May 14.

0
0

Raycast-inspired schedule-picker

Asset handoff / Orbit

Bring in the final cover frame

Drop a local image here or choose one from your device. The preview never uploads a file.

↑Drop asset herePNG, JPG, or SVG · up to 10 MB
Choose asset

No asset selected.

0
0

Raycast-inspired asset-handoff

Motion setting / Orbit

Tune the motion, then let it disappear

Keep the transition visible enough to orient people without slowing the flow.

240 ms
SnappyMeasured

Motion is set to 240 milliseconds.

0
0

Raycast-inspired motion-setting

Workspace navigation / Orbit

Keep the next destination obvious

Context stays left, the primary action stays right, and links can step out of the way on small screens.

Workspace navigation is ready.

0
3

Raycast-inspired workspace-navigation

Space navigation / Orbit

Keep the active space close

One active destination gives the team a home without turning the rail into a dashboard.

Next upReview the feature story

Two comments still need a decision.

Spring launch space selected.

0
0

Raycast-inspired space-navigation

Quick actions / Orbit

Make the next move quickly

Keep high-frequency project actions close to the work.

Actions ⌄

Choose an action.

0
0

Raycast-inspired quick-actions

Workflow tabs / Orbit

One workflow, three useful views

Keep the active stage close while letting the rest of the project fade into the rail.

CanvasReviewPublish
Canvas
Visual hierarchy is in place. Two annotations remain.

Canvas view selected.

0
0

Raycast-inspired workflow-tabs

Location trail / Orbit

Keep location visible, not loud

A short trail helps people move through nested work without taking over the surface.

Feature story is the current page.

0
0

Raycast-inspired location-trail

Review queue / Orbit

Move through the review queue

Compact pagination keeps long lists from competing with the content itself.

Showing 13–24 of 86 pages

Page 2 of 4 selected.

0
0

Raycast-inspired review-queue

Project summary / Orbit

A project card should answer “what next?”

Identity, readiness, and one useful action are enough for a compact project summary.

✦
Spring launch
Updated 4 min ago
● Ready
3 pages · 2 reviewersOpen project

Project card ready.

0
0

Raycast-inspired project-summary

Setup checklist / Orbit

Finish the setup without a second checklist

Each row is a small action; the whole list is a visible path to a ready project.

  • Connect workspaceDone
  • Add a cover frameDone
  • Invite reviewerNext

2 of 3 setup tasks complete.

0
0

Raycast-inspired setup-checklist

Activity table / Orbit

Scan activity without losing the detail

Native table structure keeps compact project history readable at a glance.

ActivityOwnerState
Launch page reviewJMReady
Hero motion passSKNeeds review
Mobile proofATDraft

No activity selected.

0
0

Raycast-inspired activity-table

Publish dialog / Orbit

Confirm the public handoff

A single decision should carry the consequence, the cancel route, and the next clear action.

Publish confirmation open.

0
0

Raycast-inspired publish-dialog

Detail drawer / Orbit

Inspect one item without leaving the queue

The detail surface stays at the edge, so the original context remains nearby.

Hero motion pass×

A reviewer requested a softer entry on the first frame.

Needs reviewLast note · 6 minutes agoMark addressed

Details for Hero motion pass are open.

0
0

Raycast-inspired detail-drawer

Context tip / Orbit

Keep the shortcut one hover away

A small contextual hint can teach the action without making the interface feel instructional.

↗Share a review link

Hover or focus the share action.

0
0

Raycast-inspired context-tip

Review alert / Orbit

One comment still needs a decision

Status copy should tell people what changed and where to act next.

Review alert is visible.

0
0

Raycast-inspired review-alert

Processing state / Orbit

Prepare the shared preview

Motion says work is underway, but a pause control keeps the state respectful.

Compiling responsive states

Estimated time · 8 seconds

Pause

Preview preparation is running.

0
0

Raycast-inspired processing-state

Transfer progress / Orbit

Upload the final asset set

Show the percentage and the next action so a long transfer never feels ambiguous.

cover-frame.zip64%
8.2 MB of 12.8 MBAdvance

Transfer is 64% complete.

0
0

Raycast-inspired transfer-progress

Status badges / Orbit

Use status as a compact contract

Labels should remain readable when the surrounding surface changes theme or density.

● Ready● Needs review● Draft4 comments

Status badges are in view.

0
0

Raycast-inspired status-badges

Reviewer group / Orbit

Keep the reviewer group close

A compact stack shows who is involved while each person stays individually selectable.

JMSKAT+
3 reviewers · all active

Select a reviewer to inspect their role.

0
0

Raycast-inspired reviewer-group

Settings panel / Orbit

Keep advanced choices tucked away

Progressive disclosure protects the main workflow while preserving useful control.

Advanced publishing
Robots, canonical URL, and redirects⌃
Include structured data

Advanced publishing is expanded.

0
0

Raycast-inspired settings-panel

Story steps / Orbit

Give the story a visible sequence

Completed work, current work, and the next decision should feel different before anyone reads the labels.

✓Brief✓Outline03Review04Share

Review is the current step.

0
0

Raycast-inspired story-steps

Gallery slides / Orbit

Let the gallery carry the proof

One visual at a time keeps the story paced and gives the controls room to breathe.

Signal before detailA quiet composition for the opening frame.
1 of 3
‹›

Slide 1 selected.

0
0

Raycast-inspired gallery-slides

Review calendar / Orbit

Choose a review day

The month stays compact; the selected date is still easy to name aloud.

June 2026Review window
123456789101112131415161718192021

Friday, June 12 selected.

0
0

Raycast-inspired review-calendar

Reach chart / Orbit

See the story’s reach at a glance

A single metric anchors the chart; shape and labels carry the trend alongside color.

Weekly reads
18.4k
+12.8%

Weekly reads are up 12.8 percent.

0
0

Raycast-inspired reach-chart

Plan choice / Orbit

Choose the room your team needs

Keep the plan decision simple: one billing switch, one clear promise, one path forward.

MonthlyAnnual · save 20%
StudioFor teams
$24/seat

Shared templates, review links, and a calm space for active work.

Choose Studio

Monthly billing selected.

0
0

Raycast-inspired plan-choice

⌘
Access / Orbit

Welcome back to the workspace

Use a passkey for a fast return, or continue with your work email.

Continue with emailUse a passkey

No account action taken.

0
0

Raycast-inspired access

⌕
Empty state / Orbit

No pages match that search

Try a shorter phrase or return to the workspace index to see everything.

Show all pages

Search returned no pages.

0
0

Raycast-inspired empty-state

⌘
Quick actions
Type to filter · Esc to close
⌘K
⌕
  • ＋Create page
    Move the project forward    ⌘
  • ＋Share review link
    Move the project forward    ⌘
  • ＋Open archive
    Move the project forward    ⌘

3 actions available.

0
0

Raycast-inspired command-palette

Assistant thread / Orbit

Keep the useful suggestion in the thread

A small assistant reply should reduce the next step, not create a second surface to manage.

Guide
I found two comments about the opening frame.
You
Summarize the decision.
Send

Guide is waiting for a reply.

0
0

Raycast-inspired assistant-thread

Activity feed / Orbit

Show the latest signal, not every event

A compact activity feed gives collaborators enough context to keep moving.

JM
Jordan marked the cover ready
6 minutes ago · Spring launch
♡ 1
SK
Sam added a note to the headline
18 minutes ago · Spring launch
♡ 1

Two recent activities.

0
0

Raycast-inspired activity-feed

Template shop / Orbit

Add a starting point, not a whole storefront

One well-described template can help a team get moving without burying the choice in a catalog.

✺
Launch narrative
8 flexible sections · responsive
Template
Add to library

Template not added.

0
0

Raycast-inspired template-shop

Overview / Orbit

See the work before opening every page

Keep the overview small: a few metrics, one trend, and a context switch for the next decision.

This weekThis month
Review speed2.4h
Pages ready18
Comments closed46

This week overview selected.

0
0

Raycast-inspired overview

Page shell / Orbit

Choose the shape of the first screen

The hierarchy stays the same while the shell changes to meet the story.

SplitStack
HERO

Split layout selected.

0
0

Raycast-inspired page-shell

Signal pattern / Orbit

Use pattern as a quiet signal

A structural accent can guide the eye without competing with the sentence that matters.

Density
LowMediumHigh

Medium pattern density selected.

0
0

Raycast-inspired signal-pattern

Raycast-inspired Keyboard Orbit AI Kit - Frontend Forever