A comprehensive React component library with Tailwind CSS styling.
To quickly set up the project, install dependencies, build the project, and run the linter, use the following command:
npm install
npm run build
npm run generate-carousel
Alternatively, you can use our setup script which does all of this in one command:
npm run setup
To install this library, run one of the following commands:
npm install github:alueddeke/my-frontend-lib#v1.0.1
# or
yarn add github:alueddeke/my-frontend-lib#v1.0.1
All components use Tailwind CSS classes for styling. You can further customize the appearance by:
- Modifying the
tailwind.config.js
file to adjust the theme. - Passing custom classes via the
className
prop (where available). - Extending the components and adding your own styles.
To use this library with Tailwind CSS in your project:
- Install Tailwind CSS in your project if you haven't already.
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p
-
Configure your
tailwind.config.js
to include your library's content:import { themes.ts } from "my-frontend-lib"; export default { content: [ "./src/**/*.{js,jsx,ts,tsx}", "./node_modules/your-library-name/**/*.js", ], theme: { extend: { colors: theme.colors, fontSize: theme.fontSizes, fontFamily: theme.fontFamily, spacing: theme.spacing, }, }, plugins: [], };
-
Import the library's CSS file, along with Tailwind directives in your main CSS file:
@import "my-frontend-lib/dist/styles.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
-
Import and use components in your React components:
import React from "react"; import { Navbar, NavLink, Button } from "my-frontend-lib"; function App() { return ( <div> <Navbar className="bg-blue-500 text-white"> <div className="flex-shrink-0"> <span className="text-xl font-bold">My App</span> </div> <div className="flex space-x-4"> <NavLink href="/" className="text-white hover:text-blue-200"> Home </NavLink> <NavLink href="/about" className="text-white hover:text-blue-200"> About </NavLink> </div> <div className="flex items-center space-x-2"> <Button onClick={() => console.log("Login clicked")}>Login</Button> <Button onClick={() => console.log("Sign up clicked")}> Sign Up </Button> </div> </Navbar> {/* Rest of your app */} </div> ); } export default App;
You have the ability to add a new section for a ComponentCarousel to display the components that showcases all available components in the library with examples and descriptions.
The ComponentCarousel is automatically generated using the generate-carousel
script. To use it in your project:
import { ComponentCarousel } from "my-frontend-lib";
function App() {
return (
<div>
<h1>Component Showcase</h1>
<ComponentCarousel />
</div>
);
}
A highly customizable button component that supports both predefined styles and custom Tailwind classes.
variant
: 'primary' | 'secondary' | 'outline' (default: 'primary')size
: 'sm' | 'md' | 'lg' | string (default: 'md')onClick
: () => voidchildren
: ReactNodeclassName
: string (optional) - Custom Tailwind classestextColor
: string (optional) - Text color class (e.g., "text-black")
The className
prop can be used to override or extend the default styles with custom Tailwind classes.
Using predefined props:
<Button
variant="secondary"
size="lg"
onClick={() => console.log("Clicked")}
textColor="text-black"
>
Click Me
</Button>
Displays content in a structured format, optionally including an image.
Props:
title
: stringdescription
: stringimageSrc
: string (optional)size
: 'sm' | 'md' | 'lg' | string (default: 'md')imageSize
: string (default: 'h-48')className
: string (optional)
<Card
title="Card Title"
description="This is a description of the card."
imageSrc="https://example.com/image.jpg"
size="lg"
imageSize="h-64"
/>
A flexible container for displaying multiple Card components in various layouts.
children
: React.ReactNode - Card components to be displayedclassName
: string (optional) - Additional CSS classes for the list containercontainerClassName
: string (optional) - Additional CSS classes for the outer containerlayout
: 'horizontal' | 'vertical' | 'grid' (default: 'horizontal')gap
: string (optional) - Tailwind CSS gap class (e.g., 'gap-4')columns
: { sm?: number; md?: number; lg?: number } (optional) - Column configuration for grid layoutitemWidth
: string (optional) - Width class for items in horizontal layout (e.g., 'w-64')itemClassName
: string (optional) - Additional CSS classes for individual item containers
Horizontal layout:
<CardList
layout="horizontal"
gap="gap-8"
itemWidth="72"
className="pb-4"
containerClassName="overflow-hidden"
>
<Card
title="Card 1"
description="Description 1"
imageSrc="/images/image1.jpg"
/>
<Card
title="Card 2"
description="Description 2"
imageSrc="/images/image2.jpg"
/>
<Card
title="Card 3"
description="Description 3"
imageSrc="/images/image3.jpg"
/>
</CardList>
Grid Layout:
<CardList
layout="grid"
gap="gap-6"
columns={{ sm: 1, md: 2, lg: 3 }}
className="pb-4"
>
<Card
title="Card 1"
description="Description 1"
imageSrc="/images/image1.jpg"
/>
<Card
title="Card 2"
description="Description 2"
imageSrc="/images/image2.jpg"
/>
<Card
title="Card 3"
description="Description 3"
imageSrc="/images/image3.jpg"
/>
</CardList>
A container for chat messages and input.
Props:
children
: ReactNodeclassName
: string (optional)
<ChatWindow>{/* Chat messages and input go here */}</ChatWindow>
Displays individual chat messages.
Props:
message
: stringisUser
: booleanclassName
: string (optional)
<MessageBubble message="Hello, how are you?" isUser={false} />
Displays a list of conversations or chat threads.
Props:
conversations
: Array<{ id: string, name: string, lastMessage: string }>onSelectConversation
: (id: string) => voidclassName
: string (optional)
<ConversationList
conversations={[
{ id: "1", name: "John Doe", lastMessage: "Hello!" },
{ id: "2", name: "Jane Smith", lastMessage: "How are you?" },
]}
onSelectConversation={(id) => console.log(`Selected conversation: ${id}`)}
/>
A customizable sign-up form component that allows for flexible field configuration.
Prop | Type | Default | Description |
---|---|---|---|
onSubmit | (formData: Record<string, string>) => void | - | Function called with form data when submitted |
submitButtonText | string | "Sign Up" | Text for the submit button |
className | string | "" | Additional classes for the form element |
children | React.ReactNode | - | Form fields (TextField or TextAreaField components) |
<SignUpForm
onSubmit={handleSignUp}
submitButtonText="Join Now"
className="max-w-md mx-auto"
>
<TextField
name="username"
label="Username"
required
inputClassName="p-2 border rounded"
/>
<TextField
name="email"
label="Email"
type="email"
required
inputClassName="p-2 border rounded"
/>
<TextAreaField
name="bio"
label="Bio"
inputClassName="p-2 border rounded"
inputStyle={{ minHeight: "100px" }}
/>
</SignUpForm>
A component for rendering text input fields within the SignUpForm.
Prop | Type | Default | Description |
---|---|---|---|
name | string | - | Name attribute for the input |
label | string | - | Label text for the input |
required | boolean | false | Whether the field is required |
className | string | "" | Additional classes for the field container |
inputClassName | string | "" | Additional classes for the input element |
inputStyle | React.CSSProperties | {} | Inline styles for the input element |
[key: string] | any | - | Any additional props are passed to the input element |
A component for rendering textarea fields within the SignUpForm.
Prop | Type | Default | Description |
---|---|---|---|
name | string | - | Name attribute for the textarea |
label | string | - | Label text for the textarea |
required | boolean | false | Whether the field is required |
className | string | "" | Additional classes for the field container |
inputClassName | string | "" | Additional classes for the textarea element |
inputStyle | React.CSSProperties | {} | Inline styles for the textarea element |
[key: string] | any | - | Any additional props are passed to the textarea element |
Both TextField and TextAreaField components are a part of SignUpForm and allow for extensive customization:
- Use
className
to style the container div (includes label and input) - Use
inputClassName
to add classes specifically to the input/textarea element - Use
inputStyle
to add inline styles to the input/textarea element
Example of a custom styled field:
<TextField
name="custom"
label="Custom Field"
className="mb-4"
inputClassName="p-3 bg-gray-100 rounded-lg"
inputStyle={{ border: "2px solid #4a5568" }}
placeholder="Enter custom data"
/>
A flexible input component that can be used for various purposes such as search bars or form inputs.
Prop | Type | Default | Description |
---|---|---|---|
onSubmit | (value: string) => void | - | Function called when the input is submitted |
placeholder | string | "Enter text..." | Placeholder text for the input |
initialValue | string | "" | Initial value of the input |
className | string | "" | Additional classes for the container div |
inputClassName | string | "" | Additional classes for the input element |
buttonClassName | string | "" | Additional classes for the submit button |
inputStyle | React.CSSProperties | {} | Inline styles for the input element |
<InputBar
onSubmit={(value) => console.log(value)}
placeholder="Search..."
inputClassName="p-2 border rounded"
buttonClassName="bg-blue-500 text-white p-2 rounded"
inputStyle={{ fontSize: "16px" }}
/>
Creates a prominent banner area, often used at the top of a page. Props:
title
: stringsubtitle
: string (optional)imageSrc
: stringheight
: 'sm' | 'md' | 'lg' | 'full' | string (default: 'md')overlay
: boolean (default: true)children
: ReactNode (optional)className
: string (optional)
<Hero
title="Welcome to Our Site"
subtitle="Discover amazing things"
imageSrc="https://example.com/hero-image.jpg"
height="lg"
>
<Button size="lg">Get Started</Button>
</Hero>
A flexible container for creating navigation bars.
Props:
children
: ReactNode - The content of the navbarclassName
: string (optional) - Additional CSS classesbgColor
: string (optional) - Background color class (e.g., "bg-blue-500")
Usage:
<Navbar className="text-white" bgColor="bg-blue-500">
<div className="flex-shrink-0">
<img src="/logo.png" alt="Logo" className="h-8 w-auto" />
<span className="ml-2 text-xl font-bold">My Company</span>
</div>
<div className="flex space-x-4">
<NavLink href="/" className="text-white hover:text-blue-200">
Home
</NavLink>
<NavLink href="/about" className="text-white hover:text-blue-200">
About
</NavLink>
</div>
<div className="flex items-center space-x-2">
<Button onClick={() => console.log("Login clicked")}>Login</Button>
<Button onClick={() => console.log("Sign up clicked")}>Sign Up</Button>
</div>
</Navbar>
A component for rendering navigation links.
Props:
href
: string - The URL the link points tochildren
: ReactNode - The content of the linkclassName
: string (optional) - Additional CSS classes
Usage:
<NavLink href="/about" className="text-white hover:text-blue-200">
About
</NavLink>
Displays a user's avatar image.
Props:
src
: stringalt
: stringsize
: 'sm' | 'md' | 'lg' | string (default: 'md')className
: string (optional)
<UserAvatar src="https://example.com/avatar.jpg" alt="User Name" size="lg" />
A customizable footer component.
Props:
links
: Array<{ label: string, href: string }>height
: 'sm' | 'md' | 'lg' | string (default: 'md')backgroundColor
: 'primary' | 'secondary' | 'background' | string (default: 'primary')className
: string (optional)
<Footer
links={[
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
]}
height="lg"
backgroundColor="secondary"
/>