It’s finally time to say goodbye to design hand-off 👋
Get started for freeNo credit card required
Select a component from your Figma file and define which parts are dynamic
Bring it to life by adding interactions
Check out how your component looks and functions and then publish it
Install new components straight from your terminal
A private npm registry just for your UI components
Every component has TypeScript definitions so you can rely on IntelliSense for autocompletion
import Button from "@awesomecorp/button";const App = () => {return (<Button variant="primary">Click me</Button>);};export default App;
import Post from "@awesomecorp/post";const App = () => {return (<Posttitle="What is going on guys">Click me</Post>);};export default App;
variant?
subtitle?
onHeartClick?
onClick?
(property) variant?: "primary" | "secondary"
Use it like you would any other React component
import Listing from "@awesomecorp/listing";const App = () => {const data = useListingData();return (<div>{data.map((listing) => (<Listingkey={listing.id}title={listing.title}description={listing.description}onFavouriteClick={() => markAsFavourite(listing.id)}onBuyClick={() => showCheckout(listing.id)}/>))}</div>);};export default App;
All of your exported components in one place
Easily switch between different versions of your components
Share and discover components with your team
uipkg helps reduce friction between designers and devs while delivering top-notch user experiences to your end users
Get started for freeNo credit card required