Scales
A repeating diagonal, horizontal, or vertical line pattern background effect.
Installation
Run the following command
npx shadcn@latest add @aceternity/scalesHorizontal Scales
Horizontal Scales
Vertical Scales
Vertical Scales
Scales Container
A wrapper component that makes it easy to add scales behind any content.
Scales Container
Wrap your content with the ScalesContainer component for a clean API.
Scales with Image
Props
Scales Props
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
orientation | "horizontal" | "vertical" | "diagonal" | "diagonal" | Direction of the scales pattern. | No |
size | number | 10 | Size of each scale unit in pixels. | No |
className | string | - | Additional CSS classes to apply to the scales container. | No |
color | string | - | Custom color for the scales pattern. | No |
ScalesContainer Props
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
children | React.ReactNode | - | Content to display inside the container. | No |
orientation | "horizontal" | "vertical" | "diagonal" | "diagonal" | Direction of the scales pattern. | No |
size | number | 10 | Size of each scale unit in pixels. | No |
className | string | - | Additional CSS classes to apply to the scales background. | No |
containerClassName | string | - | Additional CSS classes to apply to the outer container. | No |
color | string | - | Custom color for the scales pattern. | No |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
