# Source: https://tamagui.dev/ui/shapes.md

---
title: Shapes
description: Easy to use Square and Circle.
name: shapes
component: Square
package: shapes
demoName: Shapes
---

<HeroContainer>
  <ShapesDemo />
</HeroContainer>

```tsx hero template=Shapes

```

<Highlights
  features={[
    'Accepts size props as number or token value.',
    'Sets min and max width and height.',
  ]}
/>

## Installation

Shapes is already installed in `tamagui`, or you can install it independently:

```bash
npm install @tamagui/shapes
```

## Usage

Tamagui supports sizing shapes using your `size` tokens, or plain numbers.

```tsx
import { Circle, Square } from 'tamagui'

export default () => (
  <>
    <Square size="$4" />
    <Square size={100} />
    <Circle size="$4" />
    <Circle size={100} />
  </>
)
```

## API Reference

### Square

`Square` extends Stack views inheriting all the [Tamagui standard props](/docs/intro/props), plus:

<PropsTable
  data={[
    {
      name: 'size',
      required: false,
      type: 'string | tokens.size',
      description: `Set a size, number or one of the size token values.`,
    },
    {
      name: 'circular',
      required: false,
      type: 'boolean',
      description: `Rounds the border radius to be circular.`,
    },
  ]}
/>

### Circle

`Circle` extends [Square](#square), setting `circular` to `true`.