# Forme UI > Beautiful React components, yours to shape. Every item ships as source you copy into your > project. Free items install with `npx shadcn@latest add @forme/`; there is no Forme > package at runtime. Pro items install with `npx forme add `. ## Components - [Forme foundation](https://formeui.com/components/forme-foundation): Design tokens, motion presets and the shared class-name helper every Forme component builds on. Install: `npx shadcn@latest add @forme/forme-foundation` - [Avatar](https://formeui.com/components/avatar): A user image with a fallback that shows initials while the image loads, and when it never arrives at all. Built on the Radix avatar primitive, so the image and the fallback swap without a flash of empty space. Install: `npx shadcn@latest add @forme/avatar` - [Badge](https://formeui.com/components/badge): A small label for status, counts and metadata, in five quiet variants and two sizes. The colour lives in the tint so the text stays readable at eleven pixels, and an icon or a dot inside the badge carries the state at a glance. Install: `npx shadcn@latest add @forme/badge` - [Button](https://formeui.com/components/button): The primary action element. Six variants and four sizes, with a loading state that keeps the label in place and the keyboard focus intact. Install: `npx shadcn@latest add @forme/button` - [Card](https://formeui.com/components/card): A bordered surface with a header, title, description, content and footer you compose yourself, so a card is never more structure than the content inside it needs. Everything reads from the foundation tokens, which makes it retheme with the rest of the library. Install: `npx shadcn@latest add @forme/card` - [Command menu](https://formeui.com/components/command-menu): A command palette opened with ⌘K or Ctrl K, with a search field, grouped items, keyword matching and an empty state. Built on cmdk for the filtering and the keyboard path, inside a Radix dialog for the focus trap. Install: `npx shadcn@latest add @forme/command-menu` - [Dialog](https://formeui.com/components/dialog): A modal built on the Radix primitive, so the focus trap, the inert background, Esc to close and the return of focus all come from one well tested place. The overlay fades and the panel scales in, both in and out, and everything comes from the foundation tokens. Install: `npx shadcn@latest add @forme/dialog` - [Input](https://formeui.com/components/input): A text field with a real label, optional description, an error that is announced and wired up with aria-describedby, and room for an icon on either side. Sizes and the invalid state come from the same tokens as every other Forme surface. Install: `npx shadcn@latest add @forme/input` - [Tabs](https://formeui.com/components/tabs): Tabs built on the Radix primitive, so arrow keys, Home and End and the roving tab order come for free. The underline glides to the selected tab with motion and sits still when the reader has asked for reduced motion. Install: `npx shadcn@latest add @forme/tabs` - [Tooltip](https://formeui.com/components/tooltip): A short description of a control, shown on hover and on keyboard focus, with an optional arrow. Built on the Radix primitive and portalled so a tooltip is never clipped by the toolbar or table it belongs to. Install: `npx shadcn@latest add @forme/tooltip` ## Blocks - [Hero](https://formeui.com/blocks/hero): A marketing hero with an eyebrow, a headline, a supporting paragraph, two calls to action and a frame for a real product screenshot. Every part is composed by you, so the section carries your copy instead of a placeholder. Install: `npx shadcn@latest add @forme/hero` - [Pricing](https://formeui.com/blocks/pricing): A pricing section with three tiers, a monthly and annual toggle the caller controls, and a featured tier marked by a stronger border and a small label rather than a coloured card. Each tier takes its own price, so the toggle is a few lines of your own state. Install: `npx shadcn@latest add @forme/pricing` - [AI Chat](https://formeui.com/blocks/ai-chat): A complete agent conversation interface: a reader-aware message scroller, message rows with tool and reasoning groups, and an auto-growing prompt input with model selection and send/stop states. Install: `npx forme add ai-chat` - [Analytics Dashboard](https://formeui.com/blocks/analytics-dashboard): A complete analytics screen: collapsible navigation, a metric row with sparklines, a filterable area chart, and a sortable activity table. Everything is a plain component you can take apart. Install: `npx forme add analytics-dashboard` - [Billing Settings](https://formeui.com/blocks/billing-settings): A complete billing screen: plan comparison, a payment method with a real card form, an invoice history table with per-row actions, and a usage meter against the plan allowance. Install: `npx forme add billing-settings` ## Templates ## Docs - [introduction](https://formeui.com/docs/introduction) - [installation](https://formeui.com/docs/installation) - [registry](https://formeui.com/docs/registry) - [cli](https://formeui.com/docs/cli) - [react](https://formeui.com/docs/react) - [nextjs](https://formeui.com/docs/nextjs) - [vite](https://formeui.com/docs/vite) - [tailwind](https://formeui.com/docs/tailwind) - [theming](https://formeui.com/docs/theming) - [pro](https://formeui.com/docs/pro) - [license](https://formeui.com/docs/license) ## Public registry - Index: https://formeui.com/r/registry.json - Item: https://formeui.com/r/.json (Free items only)