Top Related Projects
An enterprise-class UI design language and React UI library
Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
Bootstrap components built with React
Simple React Bootstrap 5 components
⚡️ Simple, Modular & Accessible UI Components for your React Applications
A utility-first CSS framework for rapid UI development.
Quick Overview
Tabler-React is a React component library based on the Tabler UI kit. It provides a set of customizable and responsive React components that follow the design principles of Tabler, offering a clean and modern look for web applications. The library aims to simplify the process of building attractive and functional user interfaces using React.
Pros
- Extensive collection of pre-built React components
- Consistent and modern design based on the popular Tabler UI kit
- Responsive and mobile-friendly components out of the box
- Easy customization and theming options
Cons
- Limited documentation and examples compared to more established React UI libraries
- Smaller community and ecosystem compared to alternatives like Material-UI or Ant Design
- May require additional styling or customization for complex use cases
- Less frequent updates and maintenance compared to some other popular React component libraries
Code Examples
- Using a basic Button component:
import { Button } from 'tabler-react';
function MyComponent() {
return <Button color="primary">Click me</Button>;
}
- Creating a simple Card component:
import { Card } from 'tabler-react';
function MyCard() {
return (
<Card>
<Card.Header>
<Card.Title>Card Title</Card.Title>
</Card.Header>
<Card.Body>
This is the card content.
</Card.Body>
</Card>
);
}
- Implementing a Form with input fields:
import { Form, Button } from 'tabler-react';
function MyForm() {
return (
<Form>
<Form.Input label="Username" placeholder="Enter your username" />
<Form.Input type="password" label="Password" placeholder="Enter your password" />
<Button type="submit" color="primary">Submit</Button>
</Form>
);
}
Getting Started
To start using Tabler-React in your project, follow these steps:
- Install the package using npm or yarn:
npm install tabler-react
- Import the CSS file in your main application file (e.g.,
App.js
):
import 'tabler-react/dist/css/tabler-react.min.css';
- Import and use Tabler-React components in your React components:
import React from 'react';
import { Button, Card } from 'tabler-react';
function MyComponent() {
return (
<Card>
<Card.Body>
<h2>Welcome to Tabler-React</h2>
<Button color="primary">Get Started</Button>
</Card.Body>
</Card>
);
}
export default MyComponent;
Now you can start building your application using Tabler-React components!
Competitor Comparisons
An enterprise-class UI design language and React UI library
Pros of Ant Design
- Larger community and more extensive ecosystem
- More comprehensive component library with advanced features
- Better documentation and examples
Cons of Ant Design
- Steeper learning curve due to its complexity
- Larger bundle size, which may impact performance
Code Comparison
Ant Design:
import { Button } from 'antd';
const MyComponent = () => (
<Button type="primary">Click me</Button>
);
Tabler React:
import { Button } from 'tabler-react';
const MyComponent = () => (
<Button color="primary">Click me</Button>
);
Both libraries offer similar basic components, but Ant Design provides more customization options and advanced features. Tabler React has a simpler API, making it easier to get started with, but may lack some of the more complex components found in Ant Design.
Ant Design is better suited for large-scale applications with complex UI requirements, while Tabler React is ideal for smaller projects or those seeking a lightweight solution with a clean, modern design.
When choosing between the two, consider factors such as project size, required features, and team expertise. Ant Design's extensive documentation and community support can be beneficial for larger teams, while Tabler React's simplicity may be preferable for smaller projects or teams new to React development.
Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
Pros of Material-UI
- Larger community and ecosystem, with more frequent updates and contributions
- Extensive documentation and examples, making it easier for developers to learn and implement
- More comprehensive set of components and features out-of-the-box
Cons of Material-UI
- Steeper learning curve due to its extensive API and customization options
- Larger bundle size, which may impact initial load times for applications
- Stricter adherence to Material Design guidelines, potentially limiting design flexibility
Code Comparison
Material-UI:
import { Button, TextField } from '@material-ui/core';
<Button variant="contained" color="primary">
Click me
</Button>
<TextField label="Enter text" variant="outlined" />
Tabler React:
import { Button, Form } from 'tabler-react';
<Button color="primary">
Click me
</Button>
<Form.Input label="Enter text" placeholder="Type here" />
Both libraries offer similar components, but Material-UI provides more customization options and follows Material Design principles more closely. Tabler React has a simpler API and may be easier to get started with for some developers.
Bootstrap components built with React
Pros of react-bootstrap
- More mature and widely adopted project with a larger community
- Extensive documentation and examples
- Closer alignment with official Bootstrap styles and components
Cons of react-bootstrap
- Heavier bundle size due to comprehensive component set
- Less modern design aesthetic compared to Tabler's sleek interface
- Steeper learning curve for developers new to Bootstrap
Code Comparison
react-bootstrap:
import { Button, Alert } from 'react-bootstrap';
<Button variant="primary">Click me</Button>
<Alert variant="success">Success message</Alert>
tabler-react:
import { Button, Alert } from 'tabler-react';
<Button color="primary">Click me</Button>
<Alert type="success">Success message</Alert>
The code comparison shows similar usage patterns, with minor differences in prop names (e.g., variant
vs color
/type
). Both libraries offer a comparable API for common components, making it relatively easy to switch between them.
react-bootstrap provides a more comprehensive set of components and follows Bootstrap conventions more closely. tabler-react offers a modern design language and may be more suitable for projects seeking a fresh, clean aesthetic. The choice between the two depends on project requirements, design preferences, and the development team's familiarity with Bootstrap conventions.
Simple React Bootstrap 5 components
Pros of reactstrap
- More mature and widely adopted, with a larger community and ecosystem
- Comprehensive set of components that closely follow Bootstrap's design
- Extensive documentation and examples
Cons of reactstrap
- Heavier dependency on Bootstrap, which may not be ideal for custom designs
- Less flexibility in customizing component styles without overriding CSS
Code Comparison
reactstrap:
import { Button, Alert } from 'reactstrap';
<Button color="primary">Click me</Button>
<Alert color="danger">
This is a danger alert — check it out!
</Alert>
tabler-react:
import { Button, Alert } from 'tabler-react';
<Button color="primary">Click me</Button>
<Alert type="danger">
This is a danger alert — check it out!
</Alert>
The code structure is similar, with minor differences in prop names (e.g., color
vs type
for Alert). Both libraries provide a React-friendly way to implement Bootstrap-like components, but tabler-react offers a more customizable approach with its own design system based on Tabler UI kit.
⚡️ Simple, Modular & Accessible UI Components for your React Applications
Pros of Chakra UI
- More extensive component library with a wider range of UI elements
- Better accessibility support out of the box
- More active community and frequent updates
Cons of Chakra UI
- Steeper learning curve due to its extensive API and customization options
- Larger bundle size, which may impact initial load times
Code Comparison
Chakra UI:
import { Box, Button, Text } from "@chakra-ui/react"
function Example() {
return (
<Box bg="gray.100" p={4}>
<Text fontSize="xl">Hello, Chakra UI!</Text>
<Button colorScheme="blue">Click me</Button>
</Box>
)
}
Tabler React:
import { Card, Button, Text } from "tabler-react"
function Example() {
return (
<Card>
<Card.Body>
<Text>Hello, Tabler React!</Text>
<Button color="primary">Click me</Button>
</Card.Body>
</Card>
)
}
Both libraries offer component-based structures, but Chakra UI provides more granular control over styling and layout. Tabler React focuses on pre-designed components that adhere to a specific design system, while Chakra UI offers more flexibility for custom designs.
A utility-first CSS framework for rapid UI development.
Pros of Tailwind CSS
- Highly customizable and flexible utility-first CSS framework
- Smaller file sizes and better performance due to purging unused styles
- Extensive documentation and large community support
Cons of Tailwind CSS
- Steeper learning curve for developers used to traditional CSS frameworks
- Can lead to longer class names and potentially cluttered HTML
Code Comparison
Tailwind CSS:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
Tabler React:
import { Button } from 'tabler-react';
<Button color="primary">
Button
</Button>
Additional Notes
Tailwind CSS is a utility-first CSS framework, while Tabler React is a React component library built on top of Bootstrap. Tailwind CSS offers more flexibility and customization options, but requires more manual styling. Tabler React provides pre-built components, making it faster to develop consistent UIs, but with less granular control over styles.
Tailwind CSS is framework-agnostic and can be used with any JavaScript library or framework, while Tabler React is specifically designed for React applications. The choice between the two depends on project requirements, team expertise, and desired level of customization.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Update - June 2019: Version 2
Alpha now available on NPM:
npm install tabler-react@alpha
yarn add tabler-react@alpha
Check out the latest progress and get involved on this branch, or add your thoughts and requests to this issue.
Tabler React
React implementation of the Tabler Dashboard UI Kit
Demo | Documentation | Issues | Slack.
Install
Make sure you have Node.js 8+ and yarn installed.
yarn add tabler-react
Example
import React, { Component } from "react";
import "tabler-react/dist/Tabler.css";
import { Card, Button } from "tabler-react";
class MyCard extends Component {
render() {
return (
<Card>
<Card.Header>
<Card.Title>Card Title</Card.Title>
</Card.Header>
<Card.Body>
<Button color="primary">A Button</Button>
</Card.Body>
</Card>
);
}
}
For more examples and documentation see the demo website
Contributing
There are plenty of opportunities to get involved. Pick an outstanding task, let us know what you are working on and fire away with any questions.
The package is made up of 2 main folders:
- /src contains all the Tabler React components
- /example is our create-react-app based demo website
To setup and run a local copy:
- Clone this repo with
git clone https://github.com/tabler/tabler-react
- Run
yarn install
in the root folder - Run
yarn install
in the example folder - In seperate terminal windows, run
yarn start
in the root and example folders.
You should now be up and running with live browser reloading of the example website while you work on Tabler React components in the /src folder.
When you're done working on your changes, submit a PR with the details and include a screenshot if you've changed anything visually.
License
MIT © jonthomp, AaronCoplan and the contributors.
Top Related Projects
An enterprise-class UI design language and React UI library
Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
Bootstrap components built with React
Simple React Bootstrap 5 components
⚡️ Simple, Modular & Accessible UI Components for your React Applications
A utility-first CSS framework for rapid UI development.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot