Definable UI Component Library

A beautiful, modern UI component library with support for Tailwind CSS, designed for building production-ready web applications.

Features

• 35+ accessible UI components
• Responsive design
• Fully customizable via Tailwind CSS
• TypeScript support
• Storybook documentation for all components

Installation

# npm
npm install @definable/ui

# yarn
yarn add @definable/ui

# pnpm
pnpm add @definable/ui

Setup

Make sure your tailwind.config.js extends the necessary theme values:

// tailwind.config.js
module.exports = {
  content: [
    // ...
    './node_modules/@definable/ui/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // The component library uses CSS variables for theming
      // Add any custom theme extensions here
    },
  },
  plugins: [],
};

Usage

Import components directly from the package:

import { Button, Card, Input } from '@definable/ui';

function MyComponent() {
  return (
    <Card>
      <h2>Login</h2>
      <Input placeholder="Email" type="email" />
      <Button>Sign In</Button>
    </Card>
  );
}

Available Components

• Alert
• Badge
• Breadcrumb
• Button
• Card
• Carousel
• Charts
• Checkbox
• Collapse
• ConfirmationModal
• Dialog
• DropdownMenu
• Input
• Label
• Loader
• LoadingPlaceholder
• Markdown
• Modal
• Notification
• Popover
• Progress
• RadioGroup
• ScrollArea
• Select
• SelectionBar
• Separator
• Sheet
• Slider
• Switch
• Table
• TableEmpty
• Tabs
• Textarea
• Tooltip
• Stepper
• MonacoEditor

Storybook

Run the Storybook to see all available components and their usage:

# Clone the repository
git clone https://github.com/definable/storybook.git

# Install dependencies
npm install

# Run Storybook
npm run storybook

Development

To build the package locally:

npm run build

License

MIT