Skip to main content

Introduction

A Tailwind CSS Component library bringing the best of component and utility frameworks to one place without limiting your creative freedom.

Features Include:

  • Build with TypeScript
  • Development with RTL mind
  • Large and flexible component library

Quick Start#

Already have Tailwind built into your current project? Awesome, you are good to go with the next steps! If not, take a look at installing Tailwind into your project and then continue with the steps below. Slipstream is a component library wrapped around Tailwind making installation painless and easy.

npm i slipstream-ui
# or
yarn add slipstream-ui
  • Tailwind Version 2.x: slipstream-ui@1.x
  • Tailwind Version 3.x: slipstream-ui@2.x

Usage#

Navigate to your Tailwind configuration file and wrap it with the Slipstream config.

const slipstream = require("slipstream-ui/config");
// Your local tailwind customizations are still available here in your original file.
// Tailwind 2.x
module.exports = slipstream({
purge: [],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
})
// Tailwind 3.x
module.exports = slipstream({
content: [
"./node_modules/slipstream-ui/dist/**/*"
],
theme: {
extend: {},
},
plugins: [],
})

Congrats! You now have access to the entire Slipstream library.

Example#

import { Button } from "slipstream-ui";
function Example() {
return (
<Button color="primary" type="button">
Click me!
</Button>
);
}

Rendered#

Roadmap#

  • More Components!
  • Larger library of Templates
  • Documentation Refinement

Github Repository#

Source files are available to contribute and explore from the official Slipstream Repository. If you have enjoyed this project, don't forget to leave a star!