Welcome to StreamUI, your clean and minimal copy-paste component library built with React and Tailwind CSS. Follow these quick steps to get started and integrate beautiful, reusable components into your projects effortlessly.
Install Tailwind CSS
Ensure your project is set up with Tailwind CSS. If not, you can follow the official installation guide.
Navigate to the Components section to find the component you need. Each component is designed clean and easy to integrate.
Copy & Paste
Click the copy button on your chosen component and paste it directly into your React project. No additional installations are needed.
Customize as Needed
Tweak colors, sizes, and content to match your brand while retaining the clean structure of StreamUI components.
To get started with StreamUI, follow these simple installation steps to set up your project with Tailwind CSS, Poppins fonts, and the necessary configuration for seamless integration with your components.
Initialize your project
If you haven't already, create a new Next.js project or navigate to your existing project's root directory.
Terminal ~
npx create-next-app@latest
Install Tailwind CSS
Install Tailwind CSS and its dependencies:
Terminal ~
npm install -D tailwindcss postcss autoprefixer
Initialize Tailwind:
Terminal ~
npx tailwindcss init -p
Configure Tailwind to use Poppins font
In your tailwind.config.js, add Poppins to your fontFamily:
Terminal ~
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Poppins', 'sans-serif'],
},
},
},
plugins: [],
}Import Poppins Font
Import Poppins in your globals.css using Google Fonts:
Terminal ~
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');Install necesaary packages
Installation of packages which includes external icons packages along with gsap and framer motion for animation. Install all dependency directly
Terminal ~
npm install streamui-deps
Below are some frequently asked questions to help you understand and use StreamUI effectively.
StreamUI
What is StreamUI?
StreamUI is a clean, minimal copy-paste React + Tailwind component library to help you build beautiful interfaces faster.
Do I need to install additional packages?
Most components are copy-paste ready. However, for animations and icons, we recommend installing our dependency bundle via `npm install streamui-deps`.
Can I customize the components?
Yes, all components are designed to be easily customizable with your own colors, fonts, and structure while retaining clean design.
Does StreamUI support dark mode?
Yes, many components have built-in dark mode compatibility using Tailwind's dark variant classes.