​
Purpose of Design Components

Components are fundamental pieces that create a coherent and consistent user experience, from simple buttons to complex interactive elements.

Think of them as reusable LEGO pieces. Each has a specific purpose, but they can be combined in countless ways to build larger structures. When thoughtfully crafted, they help teams work more efficiently by reducing redundant work and ensuring visual harmony across different parts of an application.

​
Why Design Components are so important

  • Components ensure visual and functional consistency. Rather than recreating elements across your interface when you save a component, you can use them on any page.

  • Once created, components can be quickly added to any page or prototype.

  • Components help establish patterns that make your interface both cohesive and maintainable.

What makes Polymet’s approach to design components unique is:

  1. We generate components using natural language. Instead of pixel-perfect manipulation, describe what you need in simple language.

  2. Multiple versions of components - users can create different variations of components to get the best fit.

  3. Production-ready code - Each component comes with clean implementable react code

  4. Easily modifiable - Editing and remixing the components is possible!

​
Component Types

A design system serves as a single source of truth that unifies an organization’s digital presence through shared components, guidelines, and principles. Here’s what it encompasses:

Visual identity: brand’s visual language, including colors, typography, imagery, and spacing

Principles: Core values that guide design decisions, including voice, tone, and brand objectives

Best practices: Standards for accessibility, user experience, and documentation

Components and patterns: The reusable building blocks that form your digital products, from basic UI elements to complex interactive features

This structured approach ensures consistency and efficiency across all digital touchpoints while maintaining your brand’s unique identity.

A vertical navigation container that organizes key app sections. In Polymet, sidebars work best when you specify navigation hierarchy and transitions in your prompts - you can generate them with collapsible sections, nested items, and icon support

  • Other names: side navigation, side menu

The main wayfinding component of your interface. Unlike traditional nav menus, Polymet can generate smart, context-aware navigation that adapts to your content structure. You can specify desktop and mobile behaviors in a single prompt.

  • Other names: navigation bar, top navigation bar, top navbar, top menu

Shows users their current location and path history. In Polymet, breadcrumbs are dynamic - they can be generated to match your site structure and can include custom separators and interactive elements.

  • Other names: breadcrumb trail

​
Container Components

​
Card

Content containers that group related information. Polymet excels at generating varied card designs - from simple info cards to complex interactive ones.

  • Other names: tile

​
Sheet

Side-emerging panels for supplementary content. Polymet lets you easily specify entrance animations, backdrop effects, and responsive behaviors.

  • Other names: Bottom sheet, dialogue, snack bar, pop-up

​
Interactive Elements

​
Button

Action triggers with various states and styles allow you to describe complex button behaviors and create the visual design, hover effects, and loading states in one go.

  • Other names: Button group

​
Accordion

Expandable content sections for progressive disclosure. Through natural language descriptions, Polymet’s accordions can be generated with custom animations, nested content, and various expansion behaviors.

  • Other names: Arrow toggle, Collapsible sections, Details, Disclosure, Expander

​
Tabs

Content organizers that switch between views. Polymet can create tab systems with custom transitions, responsive layouts, and even animated indicators - all from a single prompt.

  • Other names: Tabbed interface

​
Feedback Components

​
Input

Text entry fields with validation states. Polymet excels at generating inputs with built-in validation visualization and error states - just describe the validation rules in your prompt.

  • Other names: Text input, search input, date input, file input, select input

​
Select

Option choosers with various selection modes. Polymet can create selects with search, multi-select, and custom option rendering through simple text descriptions.

  • Other names: Dropdown, select input

​
Checkbox & Radio

Selection controls for multiple or single choices. Polymet generates these with appropriate spacing, states, and animations while maintaining accessibility.

​
Visual Enhancement Components

​
Avatar

User or entity representations. Polymet can generate avatar components with fallback states, presence indicators, and group layouts.

  • Other names: Photo, user illustration

​
Badge

Status or count indicators. In Polymet, badges can be generated with automatic positioning and size adaptation based on their content.

  • Other names: Tag, label, chip

​
Tooltip

Contextual information displays. Polymet creates tooltips with smart positioning, entrance animations, and content formatting.

  • Other names: Toggletip

​
Final Notes

Creating and organizing components in Polymet is more than a technical exercise - it’s about building a foundation that can evolve with your company needs. Every team has unique requirements, workflows, and growth trajectories, meaning your component system should reflect these individual characteristics.

What works for a small startup might not scale for an enterprise, and what suits a design agency might not fit a product company. The key is building a system that’s:

  • Flexible enough to grow

  • Structured enough to maintain

  • Simple enough to understand

  • Robust enough to scale

The true measure of a successful component system is how well it works today and how easily it accommodates tomorrow’s needs.

We’re constantly working to improve our documentation and guides. Your feedback helps us do this! Leave your thoughts below or contact us—your input shapes the future of our guides!