React Component Library

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.

Setup

Install the library:

$ npm install kb-stripe-lib

Add 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;

Features

• ⚡️ Fast development and build times with Vite
• 🌟 Strong typing with TypeScript
• 💅 Stylish components with Vanilla Extract
• 📦 Easily importable components
• 🛠 Customizable themes