'use client'
import { ProgressCircle } from '@saas-ui/react'
export const ProgressCircleBasic = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
Usage
import { ProgressCircle } from '@saas-ui/react/progress-circle'<ProgressCircle.Root>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
<ProgressCircle.ValueText />
</ProgressCircle.Root>Examples
Rounded
Use the strokeLinecap prop on ProgressCircle.Range to make the ends of the
progress circle rounded.
'use client'
import { ProgressCircle } from '@saas-ui/react'
export const ProgressCircleWithRoundCap = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
Sizes
Use the size prop to change the size of the progress circle component.
'use client'
import { HStack, ProgressCircle } from '@saas-ui/react'
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
export const ProgressCircleWithSizes = () => {
return (
<HStack gap="10">
{sizes.map((size) => (
<ProgressCircle.Root key={size} size={size} value={30}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
))}
</HStack>
)
}
Colors
Use the colorPalette prop to change the color scheme of the component.
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
'use client'
import { HStack, ProgressCircle, Stack, Text } from '@saas-ui/react'
import { colorPalettes } from 'compositions/lib/color-palettes'
export const ProgressCircleWithColors = () => {
return (
<Stack gap="4" align="flex-start">
{colorPalettes.map((colorPalette) => (
<HStack key={colorPalette} gap="10" px="4">
<Text minW="8ch">{colorPalette}</Text>
<ProgressCircle.Root size="sm" value={30} colorPalette={colorPalette}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
<ProgressCircle.Root size="md" value={30} colorPalette={colorPalette}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
<ProgressCircle.Root size="lg" value={30} colorPalette={colorPalette}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
</HStack>
))}
</Stack>
)
}
Value Text
Render the ProgressCircle.ValueText component to display the progress value.
5%
5%
5%
'use client'
import { AbsoluteCenter, HStack, ProgressCircle } from '@saas-ui/react'
const sizes = ['md', 'lg', 'xl'] as const
export const ProgressCircleWithValueText = () => {
return (
<HStack gap="8">
{sizes.map((size) => (
<ProgressCircle.Root size={size} key={size} value={5}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
<AbsoluteCenter>
<ProgressCircle.ValueText />
</AbsoluteCenter>
</ProgressCircle.Root>
))}
</HStack>
)
}
Custom Thickness
Pass the --thickness css variable to the ProgressCircleRing component to
change the thickness of the ring.
'use client'
import { ProgressCircle } from '@saas-ui/react'
export const ProgressCircleWithThickness = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle css={{ '--thickness': '2px' }}>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
Indeterminate
Set the value prop to null to render the indeterminate state.
'use client'
import { ProgressCircle } from '@saas-ui/react'
export const ProgressCircleIndeterminate = () => {
return (
<ProgressCircle.Root value={null} size="sm">
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
Color
Pass the stroke prop to the ProgressCircle.Range component to change the
color of the range.
'use client'
import { ProgressCircle } from '@saas-ui/react'
export const ProgressCircleWithRangeColor = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range stroke="orange" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'The size of the component |