Command Palette

Search for a command to run...

2.4kGitHub stars
Craft

Building interfaces and interactions.

  • Fig.01

    Business Card: an open and close interaction inspired by iPhone Duo.

    View on X
  • Fig.02

    JPG Card Holder: a leather card holder shaped like a JPG file, with cards you can pull out.

    Get the codeView on X
  • Fig.03

    Apple Carousel: an infinite autoplay carousel with progress dots, inspired by Apple’s website.

    Get the codeView on X
  • Fig.04

    Deal Board: a sales pipeline kanban with drag-and-drop cards, built at shadcncraft.

    View on X
    • Vintage iPhones on stands across two lit shelves, seen at an angle through the glass door, with their boxes behind them.
    • The whole cabinet from the front: iPhones and their boxes on two shelves, and an iPad with its box on the bottom shelf.
    • A black-and-white close-up of the Apple Museum sign on the cabinet door, with a Vercel bottle on the shelf above.
    Fig.05

    Museum: a little Apple corner at home.

    View on X
  • Fig.06

    Swipe Actions: swipeable list rows that reveal actions on the left or right.

    Get the codeView on X
  • Fig.07

    Spotlight Logo: an SVG logo that lights up around the cursor, inspired by the X login page.

    Get the codeView on X
  • Fig.08

    Theme-Adaptive Avatar: a portrait with day and night versions that crossfade when the theme changes.

    View on X
  • Fig.09

    Bento Grid: every registry component running live in one grid.

    View on X
    • Simplamo's goals page with the AI chat panel open, where the OKR & KPI Coach answers a question about OKR best practices.
    • The Ideate Milestones dialog working through its steps, with a robot illustration while suggestions generate.
    • The Ideate Milestones dialog listing five suggested milestones for a goal, three of them selected, above a Create Milestones button.
    Fig.10

    Simplamo AI: a coaching chat and milestone suggestions for OKR goals, built at Simplamo.

    • Three dark mode screens of the Tung Tung app: a math question with answer choices, a score board, and the home screen.
    • Three light mode screens of the Tung Tung app: community topics, suggested tests, and a test's detail page.
    Fig.11

    Tung Tung Mobile App: a learning community for taking tests, climbing score boards, and following topics.

    • The UnlimitedStudy landing page listing its tools: quizzes, knowledge sharing, literature and culture maps, and health and life skills.
    • The home page with featured quiz collections and popular tests.
    • The quiz section with subject tabs, a featured collection banner, and suggested tests.
    • A collection page listing the 24 official math papers from the 2017 national exam.
    • A submitted physics quiz with the answer sheet on the right, scored 9 out of 10.
    • A test's overview for its author, with charts of attempts per day, week, and month, and a score distribution.
    • The question editor for a test, with the questions on the left and the answer key on the right.
    Fig.12

    UnlimitedStudy: a quiz website for students, with tools for teachers to build and track tests.

  • The home page of a Mekong Delta travel site: a green notebook-style layout with a banner of the region's landmarks, a photo slideshow, and sidebars for provinces and a distance search.
    Fig.13

    Hành Trình Khám Phá Miền Tây: my first website, a Mekong Delta travel guide I built in 8th grade.

    View on X
Command Palette

Search for a command to run...