open-index/open-npm huggingface dataset:
npm package: @sq-react-native/button
Description: React Native Button Component
Latest version: 1.0.1

---
title: Button 按钮
nav:
  title: 组件
  path: /components
group:
  title: Button 按钮
  path: /button
  order: 1
toc: menu
---

# `@sq-react-native/button`

button for react-native

## 安装

```sh
$ yarn add @sq-react-native/button
# or
$ npm install @sq-react-native/button
```

## 示例

<code src="./example/index.tsx" hideActions='["CSB"]'></code>

<API src="./src/index.tsx"></API>
npm package: @sq-react-native/prettier-config
Description: prettier config
Latest version: 1.0.0

# prettier-config

> prettier config

## Install

```sh
$ yarn add @sq/prettier-config -D
```

## Usage

In package.json:

```json
{
  "prettier": "@sq/prettier-config"
}
```

Or in .prettierrc.js:

```js
module.exports = require('@sq/prettier-config');
```

## Related repos

- [@sq/eslint-config](https://github.com/dotaeye/eslint-config)
npm package: @sq-ui/sq-grid
Description: A simple and clean CSS grid which can be configured to use either CSS Grid or Flexbox.
Author: Plamena Radneva
Latest version: 1.0.1

# sq-grid

A simple and clean CSS grid which can be configured to use either CSS Grid or Flexbox.

See a combined live preview [here](https://sq-ui.github.io/sq-grid/examples/grid.html)

> Documentation can be found [here](https://sq-ui.github.io/sq-grid/)

## Types of grid implementations

SQ-Grid offers three types of grids:

- [CSS Grid-based](https://sq-ui.github.io/sq-grid/examples/css-grid.html)
- [Flexbox-based](https://sq-ui.github.io/sq-grid/examples/flexbox-grid.html)
- Float-based

The grid which the browser should use is determined by @supports queries. In case the browser supports either native CSS grids or flexbox, the UI kit exposes class rules which the developer can use to manipulate the grid according to either grid or flexbox rules. In case the browser doesn't support either of those two features, the UI kit defaults to using floats to establish the grid rules.

## Installation
1. Install the package:
`npm install @sq-ui/sq-grid`
2. Import whatever you need:
```
./node_modules/@sq-ui/sq-grid/dist/sq-grid.css
./node_modules/@sq-ui/sq-grid/mixins.scss
./node_modules/@sq-ui/sq-grid/sq-grid.scss
```

## Usage

The grid uses a maximum of 12 columns per row. All the width calculations and corresponding classes are based on the 12-column layout.

The grid consists of the following classes:

- <b>.sq-grid</b> - The parent which wraps the grid columns. By default, it does not contain any CSS rules.
- <b>(.sq-grid).css-grid</b> - This is an additional class to .sq-grid which enables the usage of the native CSS grid feature.
- <b>(.sq-grid).css-flexbox</b> - An additional class to .sq-grid. It enables the flexbox implementation of the grid system.
- <b>(.sq-grid).auto-col-width</b> - An additional class to .sq-grid. When this class is added, the columns width is calculated automatically (based on 12-column layout).
- <b>.col</b> - The class for every child of the .sq-grid container. Represents a single column of the grid.
- <b>(.col).span-{<number\>, where <number\> can be an integer between 1 and 12}</b> - An additional class to .col. It can be used to manually set the width of box. For example, .col.span-4 would mean that the box would span 4 columns.

## Local Development
1. Clone the repository
2. Run `npm install`
3. After you modify either of the scss files, you would need to run:
`npm run build:sass`
npm package: @sqaid.ai/sqaidui
Description: A React component library with Tailwind CSS and design system
Author: sqaid.ai
Latest version: 0.1.4

# @sqaid.ai/sqaidui

A modern React component library built with TypeScript and Tailwind CSS, featuring a comprehensive design system.

## Installation

```bash
npm install @sqaid.ai/sqaidui
```

## Requirements

- React 17.0.1 or higher
- React DOM 17.0.1 or higher
- Tailwind CSS

## Setup Guide

### 1. Install Peer Dependencies

```bash
npm install react react-dom
```

### 2. Configure Tailwind CSS

Add the component library paths to your `tailwind.config.js` content array:

```js
"./node_modules/@sqaid.ai/sqaidui/dist/**/*.js"
```

### 3. Import Component Styles

Import the CSS file in your main application file:

```css
@import '@sqaid.ai/sqaidui/style.css';
```

## Usage

### Basic Button Example

```jsx
import { Button } from '@sqaid.ai/sqaidui'

<Button variant="primary" size="md">
  Click me
</Button>
```

## Available Components

- **Button** - Versatile button component with multiple variants and sizes
- **ThemeProvider** - Theme context provider for consistent styling

## Available Utilities

- **cn** - Utility function for merging class names
- **buttonVariants** - Button variant configurations

## TypeScript Support

Full TypeScript support with exported type definitions including `ButtonProps`.

## License

MIT © sqaid.ai