PlaygroundLive code playground for testing and sharing CDS components and code examples. All CDS components and hooks and all React exports are available to use in the playground without importing them. You must call render() to render your code.

Loading...

󰙡

Live Code

// Create your own example components and hooks, then call render() to render them

type CounterProps = {
  label: string
}

const Counter = ({ label }: CounterProps) => {
  const [count, setCount] = useState<number>(0)
  return (
    <VStack background="bgAlternate" borderRadius={200} padding={2}>
      <Text font="title1" paddingBottom={1.5}>
        {label}: {count}
      </Text>
      <Button onClick={() => setCount(c => ++c)}>
        Increment
      </Button>
    </VStack>
  )
}

// You must call render() to render your code
render(<Counter label="My cool counter" />)

---