Skills
.Work. You
Rest

use-design-system/SegmentedControl

Community

Intuitive tabbed navigation component.

Design & Creative#react#design system#navigation#tabs#ui component#segmented control
Authortokijh
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a flexible and accessible Segmented Control component for creating tabbed or segmented selection UIs, enhancing user navigation and data filtering.

Core Features & Use Cases

  • Controlled/Uncontrolled Modes: Supports both state-managed and default value configurations.
  • Alignment Options: Offers fixed (content-width) and fluid (full-width) layouts.
  • Size Variants: Available in small and large sizes for different contexts.
  • Keyboard Navigation: Includes arrow key support for seamless interaction.
  • Use Case: Implement a Segmented Control to allow users to switch between "List View" and "Calendar View" in a dashboard, or to filter data by "Day," "Week," or "Month."

Quick Start

Use the SegmentedControl component with 'value' and 'onChange' props to manage the selected tab state.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: use-design-system/SegmentedControl
Download link: https://github.com/tokijh/minapp/archive/main.zip#use-design-system-segmentedcontrol

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.