https://github.com/hyodotdev/kstyled

Compile-time styled-components for React Native • Zero runtime cost • Full TypeScript support • Theme-aware
https://github.com/hyodotdev/kstyled

babel-plugin css css-in-js react-native

Last synced: 4 months ago
JSON representation

Compile-time styled-components for React Native • Zero runtime cost • Full TypeScript support • Theme-aware

• Host: GitHub
• URL: https://github.com/hyodotdev/kstyled
• Owner: hyodotdev
• License: mit
• Created: 2025-10-29T10:40:32.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2025-11-17T14:12:55.000Z (8 months ago)
• Last Synced: 2025-11-27T21:36:27.505Z (7 months ago)
• Topics: babel-plugin, css, css-in-js, react-native
• Language: TypeScript
• Homepage:
• Size: 3.91 MB
• Stars: 12
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# kstyled

[![CI](https://github.com/hyodotdev/kstyled/actions/workflows/ci.yml/badge.svg)](https://github.com/hyodotdev/kstyled/actions/workflows/ci.yml)

[![Tests](https://github.com/hyodotdev/kstyled/actions/workflows/test.yml/badge.svg)](https://github.com/hyodotdev/kstyled/actions/workflows/test.yml)

[![npm version](https://img.shields.io/npm/v/kstyled.svg)](https://www.npmjs.com/package/kstyled)

[![npm downloads](https://img.shields.io/npm/dm/kstyled.svg)](https://www.npmjs.com/package/kstyled)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

⚡️ **Compile-time CSS-in-JS for React Native** • styled-components API with zero runtime overhead



  



## Quick Start

```bash

pnpm add kstyled

pnpm add -D babel-plugin-kstyled

```

```javascript

// babel.config.js

module.exports = {

  presets: ['babel-preset-expo'],

  plugins: ['babel-plugin-kstyled'],

};

```

```tsx

import { styled } from 'kstyled';

import { View, Text } from 'react-native';

const Container = styled(View)`

  flex: 1;

  background-color: #f0f0f0;

`;

const Title = styled(Text)<{ $primary?: boolean }>`

  font-size: 24px;

  color: ${p => p.$primary ? '#007AFF' : '#000'};

`;

export default function App() {

  return (

    

      Hello kstyled!

    

  );

}

```

## Features

- ⚡️ **Zero runtime** - Styles compiled to `StyleSheet.create` at build time

- 🎨 **Familiar API** - styled-components syntax you already know

- ✨ **Flexible syntax** - Supports `${16}px`, `${'16px'}`, and `${16}` (unlike styled-components/emotion)

- 🎭 **Theme support** - Built-in ThemeProvider with TypeScript

- 💪 **Full TypeScript** - Complete type inference

- 📦 **Tiny bundle** - Minimal runtime code

## Documentation

See the [full documentation](https://hyodotdev.github.io/kstyled) for:

- Getting Started guides

- Styling patterns (static, dynamic, theming)

- API reference

- Performance benchmarks

## License

MIT © [hyodotdev](https://hyo.dev)