> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getcoreframe.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Component Library Overview — 40+ Figma UI Components

> Coreframe generates a complete Figma component library with variants, component properties, and design token bindings for every UI component.

Coreframe builds a production-ready Figma component library from scratch, so you don't have to. Every component Coreframe generates comes with a full variant matrix, component properties for label and icon toggles, and direct bindings to the design tokens in your Figma variables collection. Whether you need a simple Button or a full Mega Menu, each piece of the library is consistent, organized, and ready to hand off to your development team.

## Component categories

<CardGroup cols={2}>
  <Card title="Forms" icon="input-text">
    Button, Button Group, Social Button, Input, Textarea, Select, Checkbox, Checkbox Label, Radio, Radio Label, Toggle, Toggle Label, File Upload, Verification Input
  </Card>

  <Card title="Feedback" icon="bell">
    Alert, Inline Alert, Sticky Alert, Badge, Chip, Spinner, Progress, Progress Step, Radial Loading Progress, Tooltip
  </Card>

  <Card title="Navigation" icon="compass">
    Link, Navbar, Breadcrumb, Pagination, Pagination Item, Tabs, Tab, Mega Menu, Step Indicator
  </Card>

  <Card title="Data Display" icon="table">
    Card, Accordion, Avatar, Avatar Group, Stat, Title, Rating, Calendar
  </Card>

  <Card title="Overlays" icon="layer-group">
    Modal, Dropdown
  </Card>

  <Card title="Layout" icon="shapes">
    Available via the Single Component Generator — Content Divider and other layout utilities.
  </Card>
</CardGroup>

## What each component includes

Every component Coreframe generates ships with the same set of built-in features:

* **Full variant matrix** — every combination of size, tone, style, and interactive state is pre-built as a named variant inside a Figma component set.
* **Component properties** — boolean properties let you show or hide labels, leading icons, trailing icons, and other optional slots directly from the Figma properties panel.
* **Token bindings** — fill colors, stroke colors, spacing, border radius, and typography are all wired to your Figma variables so updates propagate automatically when you change a token value.
* **Auto-generated documentation page** — Coreframe creates a companion documentation frame in Figma alongside each component, displaying the component name, description, and variant overview for your team.

## Next steps

* [Generate the full component library](/components/generating) — click individual component cards to build your library and place every component set in your Figma file.
* [Browse the complete component list](/components/component-list) — see every component organized by category with variant counts and Pro availability.