Tab

    <TabGroup>
      <Tab isActive>{demoFilms[11]}</Tab>
      <Tab>{demoFilms[13]}</Tab>
      <Tab>{demoFilms[14]}</Tab>
    </TabGroup>
  

    <Box height={9} borderSide="all" paddingX="l">
      <TabGroup height="100%">
        <Tab isActive>{demoFilms[19]}</Tab>
        <Tab>{demoFilms[10]}</Tab>
        <Tab>{demoFilms[21]}</Tab>
      </TabGroup>
    </Box>
  

    <TabGroup hasFullWidth>
      <Tab isActive>{demoFilms[19]}</Tab>
      <Tab>{demoFilms[10]}</Tab>
      <Tab>{demoFilms[21]}</Tab>
    </TabGroup>
  

    () => {
      const [activeOption, setActiveOption] = useState(demoFilms[27]);
      return (
        <TabGroup>
          <Tab
            onClick={() => setActiveOption(demoFilms[27])}
            isActive={activeOption === demoFilms[27]}
          >
            {demoFilms[27]}
          </Tab>
          <Tab
            onClick={() => setActiveOption(demoFilms[18])}
            isActive={activeOption === demoFilms[18]}
          >
            {demoFilms[18]}
          </Tab>
          <Tab
            onClick={() => setActiveOption(demoFilms[17])}
            isActive={activeOption === demoFilms[17]}
          >
            {demoFilms[17]}
          </Tab>
        </TabGroup>
      )
    }