This is a small sample of a React component library built with Vite, TypeScript, and Vanilla Extract. It aims to provide a set of reusable UI components that can be easily integrated into any React project.
Install the library:
$ npm install kb-stripe-libAdd the stylesheet to your index.tsx file.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "kb-stripe-lib/style.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);Use it in your app!
import React from "react";
import { Box, Button, Text } from "kb-stripe-lib";
function App() {
return (
<Box
css={{
padding: "large",
margin: "large",
backgroundColor: "container",
borderWidth: "thin",
borderStyle: "solid",
borderColor: "critical",
textAlign: "center",
}}
>
<Text as="title" css={{ marginBottom: "small" }}>
Look at you go!
</Text>
<Button type="destructive" size="large">
Click me
</Button>
</Box>
);
}
export default App;- ⚡️ Fast development and build times with Vite
- 🌟 Strong typing with TypeScript
- 💅 Stylish components with Vanilla Extract
- 📦 Easily importable components
- 🛠 Customizable themes