Skip to content

crossplatformkorea/cpk-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

79 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

cpk-ui

npm version CI Storybook license

React Native components with one API across iOS, Android, and web. cpk-ui is maintained by Cross Platform Korea and uses kstyled for typed, compile-time-aware styling.

cpk-ui@0.7.0 pairs with kstyled@0.4.1. Keep the runtime and Babel plugin on the same kstyled version.

Install

Expo

npx expo install cpk-ui@0.7.0 kstyled@0.4.1 @expo/vector-icons \
  react-native-gesture-handler react-native-svg expo-screen-orientation \
  @expo/match-media expo-haptics
bun add --dev babel-plugin-kstyled@0.4.1

React Native CLI

Install Expo modules first, then add the same runtime dependencies:

npx install-expo-modules@latest
bun add cpk-ui@0.7.0 kstyled@0.4.1 @expo/vector-icons \
  react-native-gesture-handler react-native-svg expo-screen-orientation \
  @expo/match-media expo-haptics
bun add --dev babel-plugin-kstyled@0.4.1

Configure kstyled before plugins that must run last:

module.exports = {
  presets: ['babel-preset-expo'],
  plugins: [
    ['babel-plugin-kstyled', {strict: true}],
    'react-native-reanimated/plugin',
  ],
};

Provider

Wrap the application once near the root:

import {CpkProvider, useCPK} from 'cpk-ui';

export function Root() {
  return (
    <CpkProvider>
      <App />
    </CpkProvider>
  );
}

function App() {
  const {assetLoaded} = useCPK();

  if (!assetLoaded) return null;
  return <Main />;
}

CpkProvider loads the bundled Pretendard font families and supplies light or dark theme tokens. Applications that provide product-specific tokens can pass customTheme={{light, dark}}.

Component Surface

Area Components
Actions Button, CustomPressable, Fab, IconButton
Inputs Checkbox, EditText, RadioGroup, Rating, SegmentedControl, SwitchToggle
Feedback AlertDialog, ErrorBoundary, LoadingIndicator, Snackbar
Display Accordion, Card, Hr, Icon, Typography
Media and system PinchZoom, StatusBarBrightness

Each public component has automated tests and Storybook coverage for its main states. Use the live Storybook to inspect controls, responsive behavior, accessibility results, and source examples.

Release Matrix

The 0.7.0 release is verified with Expo 54, React Native 0.81, React 19, kstyled 0.4, and React Native Web 0.21. This is the release validation matrix, not a claim that every consumer must use those exact React or React Native versions.

Quality Gates

bun run test:all
bun run build
bun run e2e-smoke
bun run storybook:build
bun run pack:dry

The npm publish guard rejects local publishing. Releases run only from the main-branch GitHub Actions publish workflow with provenance.

Documentation

License

MIT

About

Open design system and UI components for the community!

Resources

License

Contributing

Stars

5 stars

Watchers

0 watching

Forks

Packages

 
 
 

Contributors