Skrewww Design System

Overview

Skrewww is a React and TypeScript design system with accessible components, a token-driven foundation, a shadcn-compatible registry and a matching Figma library. Version 1.0 ships 58 React components (27 stable, 31 beta), and the same components are restyled through tokens rather than forked.

The system is organized in four layers: foundation tokens, a component library, style systems for shape (sharp, rounded, pill, squircle) and surface (flat, gradient, glass), and industry systems starting with a banking pilot. Machine-readable contracts let coding agents work from current facts instead of model memory. It is MIT licensed and listed in the shadcn community registry directory.

Features

• Component library: Actions, forms, navigation, feedback, containers and overlays, and content and data components
• Forms: Text, number, phone and credit card fields, date picker, combobox, file upload and validation messages
• Data and charts: Data table, tree view, timeline, and bar, line and area charts with chart cards and metrics
• Design tokens: Every color, radius and shadow in the docs is a resolvable token
• Style personalities: Shape and surface variants applied through tokens
• Agent Kit (beta): Component contracts, recipes and a skill for coding agents
• Guard (beta): An offline CLI that checks a project against the canonical contracts
• Figma library: 23 components free in Figma, 52 in Pro

Tech stack

• React, TypeScript
• Phosphor Icons, Recharts

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @skrewww/component-name