New:Microsoft Teams Notifications Are Now Available in Socket.Learn more
Get Started

@framingui/styled

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@framingui/styled

Token-enforced styled-components wrapper with compile-time and runtime validation

latest
Source
npmnpm
Version
0.3.5
Version published
Weekly downloads
2
-50%
Maintainers
1
Weekly downloads
 
Created
Source

@framingui/styled

Token-enforced styled-components wrapper with runtime validation

npm License

Installation

npm install @framingui/styled styled-components

Usage

import { styled, tokens } from '@framingui/styled';

// ✅ Valid: Using tokens
const Card = styled.div`
  background: ${tokens.bg.surface.elevated};
  padding: ${tokens.spacing[6]};
  border-radius: ${tokens.radius.lg};
  box-shadow: ${tokens.shadow.md};
`;

// ❌ Invalid: Hardcoded values throw runtime errors
const Bad = styled.div`
  background: #ffffff; // Error: Hardcoded value detected
  padding: 16px; // Error: Hardcoded value detected
`;

Features

  • Compile-time Type Safety: TypeScript enforces token types
  • Runtime Validation: Detects hardcoded colors and spacing values
  • IDE Autocomplete: Full IntelliSense support
  • styled-components Compatible: Works with all styled-components features

License

MIT

Keywords

styled-components

FAQs

Package last updated on 06 Mar 2026

Related posts