---
name: "@skrewww"
slug: "skrewww"
description: "Open-source React and TypeScript design system with a token-driven foundation, live documentation, and machine-readable component contracts for coding agents."
category: "AI/chat UI"
tags: ["ai", "buttons", "cards", "charts", "design-system", "forms", "loaders", "media", "navigation", "overlays", "tables"]
framework: "react"
license: "MIT"
author: "usmanfarooqi88"
website: "https://skrewww.com"
github: "https://github.com/usmanfarooqi88/skrewwwDS"
registry: "https://skrewww.com/r/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 56
generated_at: "2026-10-10T06:32:55.998Z"
---

# @skrewww

Open-source React and TypeScript design system with a token-driven foundation, live documentation, and machine-readable component contracts for coding agents.

## Links

- Website: https://skrewww.com
- GitHub: https://github.com/usmanfarooqi88/skrewwwDS
- Registry JSON: https://skrewww.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/skrewww
- This file: https://sh4dcn.vercel.app/md/skrewww.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://skrewww.com/r/registry.json
pnpm dlx shadcn@latest add https://skrewww.com/r/registry.json
bunx shadcn@latest add https://skrewww.com/r/registry.json
# clone the source repo
git clone https://github.com/usmanfarooqi88/skrewwwDS.git
# fetch the raw registry index
curl -s https://skrewww.com/r/registry.json
```

## Components (56)

| name | type | description | install |
| --- | --- | --- | --- |
| foundation | registry:file | Universal Primitive/Semantic/Brand tokens, component-tier defaults required by distributed components, Shape/Surface mode overrides, and the shared .sr-only ac… | `npx shadcn@latest add https://skrewww.com/r/foundation.json` |
| button | registry:ui | Button is a primary interactive trigger for user actions — submit, confirm, navigate, or initiate a process. | `npx shadcn@latest add https://skrewww.com/r/button.json` |
| card | registry:ui | Card is a general-purpose content container grouping related information with a clear visual boundary. | `npx shadcn@latest add https://skrewww.com/r/card.json` |
| text-input | registry:ui | Text Input is a single-line text entry for short, free-form data such as names, emails, or search terms. | `npx shadcn@latest add https://skrewww.com/r/text-input.json` |
| form-field | registry:ui | Form Field is a shared field wrapper for label, description, required indicator, and validation placement — not a visual input. | `npx shadcn@latest add https://skrewww.com/r/form-field.json` |
| validation-message | registry:ui | Validation Message is inline typed feedback paired with a field — error, warning, success, or info — with icon and text. | `npx shadcn@latest add https://skrewww.com/r/validation-message.json` |
| spinner | registry:ui | Spinner is an indeterminate loading indicator for operations without a meaningful completion percentage. | `npx shadcn@latest add https://skrewww.com/r/spinner.json` |
| divider | registry:ui | Divider is a thin separator line between content sections — horizontal or vertical, semantic or decorative. | `npx shadcn@latest add https://skrewww.com/r/divider.json` |
| link | registry:ui | Link is semantic navigational text styled as inline or standalone links — not for primary actions. | `npx shadcn@latest add https://skrewww.com/r/link.json` |
| checkbox | registry:ui | Checkbox is a native checkbox for independent or multi-select choices, including indeterminate group states. | `npx shadcn@latest add https://skrewww.com/r/checkbox.json` |
| progress-bar | registry:ui | React progress bar for uploads and background tasks, with measured value/max progress, an indeterminate mode, a visible label, and optional percentage text. | `npx shadcn@latest add https://skrewww.com/r/progress-bar.json` |
| skeleton | registry:ui | Skeleton is temporary placeholder shapes that preserve layout while known content is loading. | `npx shadcn@latest add https://skrewww.com/r/skeleton.json` |
| radio | registry:ui | Radio is a native radio button for a single option inside a mutually exclusive group. | `npx shadcn@latest add https://skrewww.com/r/radio.json` |
| switch | registry:ui | Switch is a boolean settings control for immediate on/off changes — not a substitute for Checkbox in forms. | `npx shadcn@latest add https://skrewww.com/r/switch.json` |
| textarea | registry:ui | Textarea is a multi-line native textarea for longer free-text content, composed with FormField for label and validation. | `npx shadcn@latest add https://skrewww.com/r/textarea.json` |
| pagination | registry:ui | Pagination is a paged navigation control with Previous/Next boundaries, numbered pages, and optional ellipsis. | `npx shadcn@latest add https://skrewww.com/r/pagination.json` |
| avatar | registry:ui | Avatar is a circular visual identity for a user or entity with image, initials, or icon fallback. | `npx shadcn@latest add https://skrewww.com/r/avatar.json` |
| breadcrumb | registry:ui | Breadcrumb is an ordered hierarchical trail showing location with navigable ancestors and a current-page indicator. | `npx shadcn@latest add https://skrewww.com/r/breadcrumb.json` |
| radio-group | registry:ui | Radio Group is an accessible grouping layer for mutually exclusive radio options with legend, helper text, and errors. | `npx shadcn@latest add https://skrewww.com/r/radio-group.json` |
| slider | registry:ui | Slider is a single-value control for selecting a number within min/max by dragging or keyboard-adjusting a thumb along a track. | `npx shadcn@latest add https://skrewww.com/r/slider.json` |
| stepper | registry:ui | Stepper shows progress through a fixed, known-length, ordered sequence of named steps — a compound Stepper + Step API built against the verified live Navigatio… | `npx shadcn@latest add https://skrewww.com/r/stepper.json` |
| table | registry:ui | Table is a native HTML table foundation with captions, headers, body rows, footers, cell alignment, responsive overflow, RTL support, print-friendly scrolling,… | `npx shadcn@latest add https://skrewww.com/r/table.json` |
| badge | registry:ui | Badge is a compact non-interactive label for status, classification, or numeric counts at a glance. | `npx shadcn@latest add https://skrewww.com/r/badge.json` |
| tag | registry:ui | Tag is a compact classification label for categories, filters, or user-applied values — distinct from read-only Badge status metadata. | `npx shadcn@latest add https://skrewww.com/r/tag.json` |
| list-item | registry:ui | List Item is a single row inside a collection — avatar, title, description, metadata, and optional trailing content. | `npx shadcn@latest add https://skrewww.com/r/list-item.json` |
| timeline | registry:ui | Timeline is a vertical, chronological event list built on Content/Timeline Item rows — Default outlined-ring or Highlighted solid-dot markers, connector suppre… | `npx shadcn@latest add https://skrewww.com/r/timeline.json` |
| empty-state | registry:ui | Empty State is a zero-content placeholder with title, description, and optional recovery actions for collections, search, or first-use flows. | `npx shadcn@latest add https://skrewww.com/r/empty-state.json` |
| alert | registry:ui | Alert is a persistent inline feedback block for contextual status tied to page content — not auto-dismissing. | `npx shadcn@latest add https://skrewww.com/r/alert.json` |
| toast | registry:ui | Toast is a transient floating notification for confirming actions or reporting short-lived events. | `npx shadcn@latest add https://skrewww.com/r/toast.json` |
| button-group | registry:ui | Button Group joins related independent Buttons with shared outer chrome and a 2px divider gap — layout only; each Button keeps its own behavior. | `npx shadcn@latest add https://skrewww.com/r/button-group.json` |
| toggle-group | registry:ui | Toggle Group is exclusive segmented selection (radiogroup) with joined chrome — Segmented Control is this presentation, not a separate component. | `npx shadcn@latest add https://skrewww.com/r/toggle-group.json` |
| accordion | registry:ui | Accordion is a set of stacked collapsible sections for progressive disclosure, built from Accordion Item building blocks. | `npx shadcn@latest add https://skrewww.com/r/accordion.json` |
| tabs | registry:ui | Tabs is a navigation pattern that switches between related in-context views using tablist/tab/tabpanel semantics and roving focus. | `npx shadcn@latest add https://skrewww.com/r/tabs.json` |
| search-field | registry:ui | Search Field is a search-specific text field with leading magnifying-glass icon and optional clear action — built on shared text-input control behavior. | `npx shadcn@latest add https://skrewww.com/r/search-field.json` |
| credit-card-field | registry:ui | Credit Card Field is a compound UI control for card number, expiry, and CVC in one shell — visual pattern only, not a payment processor or PCI vault. | `npx shadcn@latest add https://skrewww.com/r/credit-card-field.json` |
| number-input | registry:ui | Number Input is direct numeric entry with optional steppers and min/max/step — not currency, quantity business logic, or a Slider. | `npx shadcn@latest add https://skrewww.com/r/number-input.json` |
| file-upload | registry:ui | File Upload is a native file input with drag-and-drop dropzone, advisory validation, selected-file list, and multipart form submission — selection only, not ne… | `npx shadcn@latest add https://skrewww.com/r/file-upload.json` |
| popover | registry:ui | Popover is a non-modal floating panel for supplementary or lightly interactive content anchored to a trigger. | `npx shadcn@latest add https://skrewww.com/r/popover.json` |
| tooltip | registry:ui | Tooltip is a brief supplementary label for a trigger, shown on keyboard focus or pointer hover. | `npx shadcn@latest add https://skrewww.com/r/tooltip.json` |
| dialog | registry:ui | Dialog is a modal overlay that interrupts workflow for focused attention, information, or a decision. | `npx shadcn@latest add https://skrewww.com/r/dialog.json` |
| drawer | registry:ui | Drawer is an edge-anchored modal panel for supplementary settings, filters, or secondary forms. | `npx shadcn@latest add https://skrewww.com/r/drawer.json` |
| menu | registry:ui | Menu is a compact command surface for contextual actions — distinct from Select (form values) and Popover (supplementary content). | `npx shadcn@latest add https://skrewww.com/r/menu.json` |
| split-button | registry:ui | Split Button joins one primary Button action with a related Menu trigger using shared outer chrome — composition only; Button and Menu keep their own APIs. | `npx shadcn@latest add https://skrewww.com/r/split-button.json` |
| calendar-day | registry:ui | Calendar Day is a single selectable day cell inside a month calendar grid. | `npx shadcn@latest add https://skrewww.com/r/calendar-day.json` |
| calendar-grid | registry:ui | Calendar Grid is a composed month-view calendar with single-date or range selection and grid keyboard navigation. | `npx shadcn@latest add https://skrewww.com/r/calendar-grid.json` |
| select | registry:ui | Select is a combobox-style single-select with a Popover listbox trigger and hidden native select for form submission. | `npx shadcn@latest add https://skrewww.com/r/select.json` |
| combobox | registry:ui | Combobox is an editable searchable single-select with a filterable listbox — distinct from non-searchable Select and query-only Search Field. | `npx shadcn@latest add https://skrewww.com/r/combobox.json` |
| date-picker | registry:ui | Date Picker is a date-only field with editable D MMM YYYY text entry (en-GB) and calendar popover for single-date selection. | `npx shadcn@latest add https://skrewww.com/r/date-picker.json` |
| phone-number-field | registry:ui | Phone Number Field pairs a country/dial-code selector with a phone number input — UI pattern only, not SMS verification or carrier lookup. | `npx shadcn@latest add https://skrewww.com/r/phone-number-field.json` |
| tree-view | registry:ui | Tree View is a hierarchical, keyboard-navigable tree — file explorers, nested category browsers, org charts. Composes Content/Tree Item rows with roving-tabind… | `npx shadcn@latest add https://skrewww.com/r/tree-view.json` |
| data-table | registry:ui | Data Table is an interactive data-table pattern composing Table with header sorting and external Pagination — no columns-config prop; the consumer writes their… | `npx shadcn@latest add https://skrewww.com/r/data-table.json` |
| bar-chart | registry:ui | Bar Chart compares categories with vertical or horizontal bars — a single series by default, or several series grouped, stacked, or stacked to 100%. Static and… | `npx shadcn@latest add https://skrewww.com/r/bar-chart.json` |
| line-chart | registry:ui | Line Chart shows a trend across ordered categories — a single series by default, or several series as separate lines. Static and non-tabbable, with an optional… | `npx shadcn@latest add https://skrewww.com/r/line-chart.json` |
| area-chart | registry:ui | Area Chart shows magnitude over ordered categories with a filled area under each line — a single series by default, or several series overlapped, stacked, or s… | `npx shadcn@latest add https://skrewww.com/r/area-chart.json` |
| chart-card | registry:ui | Chart Card is a Card composed for a chart: an optional title/description/actions header, and a body that owns loading/empty/error presentation around a chart t… | `npx shadcn@latest add https://skrewww.com/r/chart-card.json` |
| chart-metric | registry:ui | Chart Metric is a labeled value with an optional directional delta, for use above a chart or standalone — the delta's direction drives only its icon, never a c… | `npx shadcn@latest add https://skrewww.com/r/chart-metric.json` |

## For AI agents

```text
You are adding components from @skrewww to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/skrewww.md) for the component list.
2. Fetch the machine-readable index: https://skrewww.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: skrewww).
```