custom-ui

Custom UI library built with React, Radix UI, Tailwind CSS v4, and TypeScript.

Features

• 🚀 Modern Stack: Built with React 19, TypeScript, and Tailwind CSS 4.
• 🎨 Beautifully Styled: Includes a comprehensive set of UI components.
• ♿ Accessible: Built on top of Radix UI primitives for accessibility.
• 🛠️ Customizable: Easy to extend and customize.
• 📦 Tree-shakeable: Import only what you need.

Installation

npm install react-start-kit

Setup

To use the styles, import the CSS file in your root entry file (e.g., main.tsx, App.tsx, or index.js).

import 'react-start-kit/dist/react-start-kit.css';

Usage

Import components directly from the package:

import { Button } from 'react-start-kit';

function App() {
  return (
    <Button variant="default" onClick={() => console.log('Clicked!')}>
      Click me
    </Button>
  );
}

You can also import specific components to optimize bundle size:

import { Alert, AlertTitle, AlertDescription } from 'react-start-kit/alert';

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    This is a description inside an alert component.
  </AlertDescription>
</Alert>;

Components

The library includes the following components:

• Accordion: Vertically stacked set of interactive headings.
• Alert: Displays a callout for user attention.
• Alert Dialog: A modal dialog that interrupts the user with important content.
• Avatar: An image element with a fallback for representing the user.
• Badge: Displays a status or a count.
• Breadcrumb: Displays the path to the current resource.
• Button: Displays a button or a component that looks like a button.
• Calendar: Date and time pickers.
• Card: Displays a card with header, content, and footer.
• Collapsible: An interactive component which expands/collapses a panel.
• Dialog: A window overlaid on either the primary window or another dialog window.
• Dropdown Menu: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
• Form: Building blocks for forms, including Inputs, Checkboxes, Selects, Switches, Radio Groups, and Textareas.
• Pagination: Pagination controls.
• Popover: Displays rich content in a portal, triggered by a button.
• Progress: Displays an indicator showing the completion progress of a task.
• Scroll Area: Augments native scroll functionality for custom, cross-browser styling.
• Separator: Visually or semantically separates content.
• Sheet: Extends the Dialog component to display content that complements the main screen.
• Skeleton: Used to show a placeholder while content is loading.
• Tabs: A set of layered sections of content—known as tab panels—that are displayed one at a time.
• Table: A responsive table component.
• Tooltip: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Requirements

• React >= 19
• React DOM >= 19
• Tailwind CSS >= 4

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Alisher Khayrillaev