sprinta-ui

v5.5.0

Published

7 months ago

A modern React component library built with Radix UI and standard CSS.

0High
0Medium
0Low

clinton-nk

react typescript components ui design-system radix-ui css

Sprinta UI ⚡️ — Build fast. Scale faster.

Skip the setup. Start building. Sprinta UI gives you modern, themeable UI blocks designed for teams who move fast and build for scale.

Why Sprinta UI?

Foundation of Excellence: Powered by Radix UI, Sprinta offers accessible, battle-tested behavior primitives — no hacks or extra effort required.
Standards-Based Styling: Built with modern CSS — using Cascade Layers (@layer) and Custom Properties (var()). No proprietary styling systems. No extra build steps.
Token-Driven Theming: Customize everything. Our design tokens are simple CSS variables defined in dist/sprinta-ui.css, giving you full control over themes, spacing, colors, and radii.
Clean, Predictable Baseline: A combination of modern-normalize and targeted resets ensures consistency without fighting browser defaults.
Effortless Dark Mode: Switch between light and dark modes easily by toggling a single class (dark) — powered entirely by tokens and standard CSS.
Pure React & TypeScript: Components are performant, readable, and easy to integrate.

Sprinta UI is perfect for product teams pushing boundaries, indie hackers building the next big thing, and startups who demand quality without compromising speed.

Installation

Install Sprinta UI using your preferred package manager:

npm install sprinta-ui
# or
yarn add sprinta-ui
# or
pnpm add sprinta-ui

Peer Dependencies:

Sprinta UI requires you to install react and react-dom in your project:

# Using npm
npm install react react-dom

# Or using yarn
yarn add react react-dom

# Or using pnpm
pnpm add react react-dom

Sprinta UI bundles the necessary Radix UI primitives, so you don't need to install them separately.

Usage

Import the CSS: Import the core stylesheet into your main application file (e.g., main.tsx, App.tsx):

// Example: src/main.tsx or src/App.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "sprinta-ui/style.css"; // <-- Import the CSS

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Import Components: Import and use the components you need:

import { Button, Input, Tooltip } from "sprinta-ui";

function MyComponent() {
  return (
    <div>
      <Tooltip content="Click this button!">
        <Button variant="primary">Click Me</Button>
      </Tooltip>
      <Input placeholder="Enter your name..." />
    </div>
  );
}

(Optional) Dark Mode: To enable dark mode, add the dark class to a parent element (like <html> or <body>):
```
<html lang="en" class="dark">
  <body>
    <div id="root"></div>
  </body>
</html>
```
Styling & Overrides (CSS Layers):
Sprinta UI uses CSS Cascade Layers to manage style specificity, with the following layer structure:
```
@layer reset, base, components;
```
Method 1: Using CSS Layers
To override Sprinta UI styles, define your custom styles in layers that come after the components layer:
```
/* Your global CSS file */

/* First, declare layers in the correct order */
@layer reset, base, components, custom;

/* Import Sprinta styles */
@import "sprinta-ui/style.css";

/* Add your overrides in the custom layer */
@layer custom {
  /* Example: Customize button styles */
  .sprinta-button {
    font-weight: bold;
  }

  /* Target specific variants using data attributes */
  .sprinta-button[data-variant="primary"] {
    background-color: navy;
  }
}
```
Method 2: Using CSS Variables
The easiest way to customize Sprinta UI is by overriding the CSS variables (custom properties). All components use semantic tokens defined in the root level:
```
/* Your global CSS file */
:root {
  /* Override semantic tokens */
  --color-primary: #3b82f6; /* Change primary color */
  --color-danger: #ef4444; /* Change danger color */
  --radius-md: 0.5rem; /* Change medium border radius */
  --spacing-4: 1.25rem; /* Change spacing scale */
}

/* Dark mode overrides */
.dark {
  --color-primary: #60a5fa;
  --color-bg: #09090b;
  --color-text: #f9fafb;
}
```
Available Token Categories
Sprinta UI provides the following token categories:
- Colors: --color-primary, --color-danger, --color-success, etc.
- Text colors: --color-text, --color-text-muted, --color-placeholder
- Background colors: --color-bg, --color-bg-surface, --color-bg-card
- Spacing: --spacing-1 through --spacing-96 (0.25rem to 24rem)
- Border radius: --radius-xs through --radius-full
- Font sizes: --text-xs through --text-9xl
- Shadows: --shadow-sm through --shadow-2xl
All tokens are defined in sprinta-ui/style.css and can be inspected in your browser's dev tools.

Documentation & Storybook

Explore the components in action and view detailed documentation on our Storybook Deployment.

Contributing

Contributions are welcome! Please refer to the contributing guidelines (TODO: Create CONTRIBUTING.md).

License

Sprinta UI is licensed under the MIT License.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme