Alpy design system

Build consistent interfaces with AI using accessible, token-bound components with semantic tokens, typography, colors, and light/dark support, available as production-ready React or Vue components or for insertion into Figma.

Resources

AI-ready
design system

React
Components

Vue
Components

Figma Tokens & Components

Components

  • Accordion

    Organize content into expandable sections.

  • Alert

    Communicate important messages and status updates.

  • Badge

    Highlight status, counts, or labels.

  • Breadcrumbs

    Show location within a navigation hierarchy.

  • Button

    Trigger an action.

  • Card

    Group related content and actions.

  • Checkbox

    Select one or more options.

  • Date Picker

    Choose dates from a calendar.

  • Dropdown

    Choose from a list of options.

  • Icons

    Communicate actions and concepts visually.

  • Image

    Display visual content.

  • Modal

    Present focused content above the page.

  • Pagination

    Move between pages of content.

  • Popover

    Show supporting content near a trigger.

  • Progress Bar

    Show progress toward completion.

  • Progress Indicator

    Show progress through a sequence of steps.

  • Radio

    Select one option from a group.

  • Table

    Organize data into rows and columns.

  • Tabs

    Switch between related views.

  • Text Input

    Enter short text.

  • Textarea

    Enter longer text across multiple lines.

  • Toggle

    Turn an option on or off.

  • Tooltip

    Provide brief contextual guidance.

Feedback

Help us improve by providing feedback, asking questions, requesting features, or leaving any other comments on GitHub.