Components
A small segmented control for switching a chart between week, month, and year.
Showing: month
"use client"
import * as React from "react"Installation#
pnpm dlx shadcn@latest add https://dashboardcn.com/r/period-tabs.jsonAlso installs tabs from shadcn/ui if missing.
Usage#
import { PeriodTabs } from "@/components/ui/period-tabs"
const [period, setPeriod] = React.useState("month")
<PeriodTabs value={period} onValueChange={setPeriod} />Examples#
Animated#
Set animated to slide a single pill between tabs instead of swapping backgrounds.
Showing: month
"use client"
import * as React from "react"Your dashboard, your code.
Every component is copied into your project with the shadcn CLI. No package to upgrade, nothing to override.