Convert Figma logo to code with AI

tabler logotabler-react

React components and demo for the Tabler UI theme.

2,291
545
2,291
84

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

37,442

⚡️ 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

  1. Using a basic Button component:
import { Button } from 'tabler-react';

function MyComponent() {
  return <Button color="primary">Click me</Button>;
}
  1. 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>
  );
}
  1. 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:

  1. Install the package using npm or yarn:
npm install tabler-react
  1. Import the CSS file in your main application file (e.g., App.js):
import 'tabler-react/dist/css/tabler-react.min.css';
  1. 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.

37,442

⚡️ 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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

NPM Type definitions Greenkeeper badge Commitizen friendly

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:

  1. Clone this repo with git clone https://github.com/tabler/tabler-react
  2. Run yarn install in the root folder
  3. Run yarn install in the example folder
  4. 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.