Skip to content
shipanysaas
Get the kit

Components

What your app is built from.

The buttons, forms, tables and dialogs your agent builds with, on shadcn/ui and Base UI. Each one here is live.

50 components on this page

Buttons and actions

The controls people press all day: buttons, toggles, shortcuts and copy buttons.

6 components

  • View docs

    Button

    Six styles, from the main action to a quiet link.

  • Button group

    Related buttons joined into one control.

  • Toggle

    A button that stays on or off.

  • Press⌘Kto search

    Keyboard key

    Shows the shortcut for an action.

  • Invite link

    Copy to clipboard

    Copies text in one click and confirms with a toast.

  • Read the docs
    Set up the kit, then build on it.

    Card button

    A whole card that works as one big button.

Forms and inputs

Fields for sign-up, settings and checkout, with labels, hints and error states.

12 components

  • Input

    A single-line text field.

  • Textarea

    Room for longer messages and notes.

  • Everyone you invite sees this name.

    Field

    Label, hint and error message, wired to the input.

  • Input group

    An input with icons, text or buttons inside it.

  • Select

    Pick one option from a list.

  • Native select

    The browser’s own picker, styled to match.

  • Checkbox

    A yes or no choice.

  • Notify me about

    Radio group

    One choice out of a few.

  • Switch

    Turns a setting on or off right away.

  • Seats

    Slider

    Pick a number by dragging.

  • Enter the 6-digit code we emailed you.

    One-time code

    Boxes for the code from a sign-in email.

  • October 2026

    Calendar

    Pick a date from a month view.

Data display

Cards, tables and charts, plus the states in between: loading, empty and in progress.

10 components

  • Acme
    Team plan, billed monthly

    5 of 10 seats in use

    Card

    A titled box for one piece of content.

  • NewDraftOwnerOverduePaidTrial

    Badge

    A short label for a status or a role.

  • ALGHKJ
    3 more

    Avatar

    A person or a team, as initials or a photo.

  • MacBook Pro

    Passkey, last used today

    iPhone

    Passkey, last used last week

    Item

    A list row with an icon, text and actions.

  • Recent invoices
    InvoiceStatusAmount
    INV-1042Paid$49.00
    INV-1041Paid$49.00
    INV-1040Due$147.00

    Table

    Rows and columns with a header and a caption.

  • Storage
    x

    Progress

    Shows how far along something is.

  • Skeleton

    A placeholder in the shape of what’s loading.

  • Sign-upsSample data

    Chart

    Charts drawn in the theme’s colors, with tooltips.

  • Spinner

    Shows that something is working.

  • No projects yet
    Create your first project to see it here.

    Empty state

    What to show, and what to do, when there’s nothing yet.

Feedback and overlays

Dialogs, sheets, menus and toasts. Press a button and it opens.

11 components

  • Alert

    A message that stays on the page.

  • Toast

    A short message that shows up and goes away.

  • Dialog

    A window for one focused task.

  • Alert dialog

    Asks first before anything that can’t be undone.

  • Sheet

    A panel that slides in from the side.

  • Drawer

    A panel that slides up from the bottom.

  • Popover

    Extra content next to the button that opened it.

  • Tooltip

    A hint on hover or keyboard focus.

  • Dropdown menu

    A list of actions behind one button.

  • Right-click here, or long-press on a phone

    Context menu

    Actions on right-click or long-press.

  • Command menu

    Type to find an action, then pick it with the keyboard.

Navigation

Tabs, menus, steps and page links that show people where they are.

6 components

  • Update your name, photo and email.

    Tabs

    Switch between views without leaving the page.

  • Breadcrumb

    Shows where a page sits, with links back up.

  • Pagination

    Moves through a long list one page at a time.

  • Navigation menu

    A site menu with panels of links.

  • 2
    Team

    Stepper

    Shows progress through a flow with several steps.

  • Your name, photo and email.

    Accordion

    Sections that open one at a time.

Layout and theme

The pieces that hold a screen together, and the switch between light and dark.

5 components

  • Account

    Manage your profile and security.

    ProfileSecurityBilling

    Separator

    A thin line between groups of content.

  • Scroll area

    A scrolling box with a slim scrollbar.

  • The shipanysaas share image

    Aspect ratio

    Keeps an image or video at a fixed shape.

  • Starred projects

    Marketing site

    Collapsible

    Hides extra content until someone asks for it.

  • Pick light, dark or system. The whole page follows.

    Theme switch

    Light, dark, or match the device.

They all come with the kit.

Light and dark themes included, plus instructions that tell your agent how to use them.

Get the kitFrom $149 once · 14-day refund
Live demo

Resets hourly

Get the kit