Opsolute Design System
Component library showcase and documentation
About This Playground
Welcome to the Opsolute Design System Playground, an interactive documentation and testing environment for our component library. This playground provides developers and designers with a comprehensive way to explore, test, and understand our UI components.
Each component page features an interactive playground where you can experiment with different props, variants, and states in real-time. You can see live previews, generate code snippets, and view the component's API documentation all in one place.
Our design system is built with React, TypeScript, and modern UI libraries to ensure type safety, accessibility, and consistency across all components. All components follow our design tokens and are fully customizable to match your application's needs.
Browse the components below to get started, or use the sidebar navigation to jump directly to any component's playground.
Available Components
Button
IconButton component with variants, sizes, and states
Toggle
Toggle switch component with label support
Checkbox
Checkbox with checked, indeterminate and disabled states
Tooltip
Tooltip component with multiple placements
Icon
Icon component with Lucide React icon library
KPI Card
KPI Card component for displaying metrics and statistics
Tag
Tag component with dismiss functionality
Badge
Status badges with optional leading icon (Positive, Negative, Notice, Neutral, Primary)
Chip
Selectable pills for filters and options (Default / Selected, optional icon)
TextInput
Text input field with multiple states and variants
Dropdown Input
Dropdown select input with label, states and optional suffix
TextArea
Multi-line textarea input component
PasswordInput
Password input with visibility toggle
Side Panel
Generic side panel component that slides in from the right
Filter Panel (Prototype)
Filters side panel with date pills, dropdowns, calendar, Cancel/Apply
Tabs
Tab navigation component for switching views
Segment
Segmented control for selecting options (pill-style)
Avatar
Avatar component with image, icon, and initials variants
Loading
Circular progress indicator component
Calendar
Calendar component with date range selection
Chart
Chart components showcase: ring, bar, axis, table, and more