open-index/open-npm huggingface dataset:
npm package: @granularjs/create-app
Description: Create a new Granular app with one command
Latest version: 1.0.0

# @granularjs/create-app

Scaffolding for Granular projects. Create a new Granular app with one command.

## Usage

Same as React / Vite: use `npm create` (runs `npx @granularjs/create-app` under the hood). Run from the folder where you want the new app (e.g. your projects folder), not from inside the create-granular-app repo:

```bash
npm create @granularjs/app my-app
cd my-app
npm run dev
```

Or call the package directly:

```bash
npx @granularjs/create-app my-app
```

## What's included

The template includes:

- **Vite** for fast development and building
- **granular** - the core framework
- **@granularjs/ui** - component library
- Pre-configured routing with `createRouter`
- Example pages with reactivity demos
- Modern CSS setup

## Project structure

```
my-app/
├── .gitignore
├── index.html
├── package.json
├── README.md
├── vite.config.js
├── public/
│   └── favicon.svg
└── src/
    ├── main.js              # Entry point
    ├── router.js            # Route definitions
    ├── styles.css           # Global styles
    ├── layouts/
    │   └── app.layout.js    # App shell/layout
    ├── components/          # Reusable components
    │   └── todo-item.component.js
    ├── pages/               # Page components
    │   ├── home.page.js     # Home page with examples
    │   └── about.page.js    # About page
    └── stores/              # State stores
        └── todo.store.js
```

## Development

```bash
npm run dev      # Start dev server at localhost:3000
npm run build    # Build for production
npm run preview  # Preview production build
```

## Learn more

- [Granular Documentation](https://granular.web.app)
- [GitHub](https://github.com/granularjs/granular)
npm package: @granularjs/ui
Description: 90+ production-ready UI components for Granular. Dark/light themes, CSS variables, accessible, zero dependencies beyond @granularjs/core.
Author: Guilherme Ferreira
Latest version: 0.3.12

# Granular UI

Modern UI components for `granular`, inspired by Mantine, built for a no-build, DOM-first workflow.

## Quick Start

```js
import { Container, Stack, Title, Text, Button, useDisclosure, Modal } from '@granularjs/ui';

const [opened, { open, close }] = useDisclosure(false);

const App = () =>
  Container(
    Stack({ gap: 16 },
      Title({ order: 2 }, 'Granular UI'),
      Text({ dimmed: true }, 'Fast, clean, and modern.'),
      Button({ onClick: open }, 'Open modal'),
      Modal({ opened, onClose: close, title: 'Hello' },
        Text('This is a modal.')
      )
    )
  );
```

## Components

- `Button`
- `Text`
- `Title`
- `Container`
- `Stack`
- `Group`
- `Card`
- `Badge`
- `TextInput`
- `Textarea`
- `NumberInput`
- `Modal`
- `Loading`
- `Checkbox`
- `Switch`
- `Select`
- `Tabs`
- `Table`
- `Accordion`
- `Tooltip`
- `Menu`
- `Drawer`
- `Notification`
- `Divider`
- `Paper`
- `Alert`
- `Avatar`
- `Kbd`
- `Code`
- `Blockquote`
- `SimpleGrid`
- `List`
- `Anchor`
- `Image`
- `Progress`
- `Slider`
- `Skeleton`
- `Chip`
- `SegmentedControl`
- `Pagination`
- `Radio`
- `RadioGroup`
- `Breadcrumbs`
- `Center`
- `Space`
- `Collapse`
- `ActionIcon`
- `Popover`
- `HoverCard`
- `Affix`
- `Fieldset`
- `AppBar`
- `Sidebar`
- `Timeline`
- `Stepper`
- `Rating`
- `Tag`
- `Calendar`
- `MultiSelect`
- `ToastStack`
- `DatePicker`
- `Notifications`
- `RangeSlider`
- `DateInput`
- `NumberField`
- `Popper`
- `PasswordInput`
- `SearchInput`
- `CopyButton`
- `ProgressRing`
- `Toast`
- `SelectSearch`
- `SwitchGroup`
- `RangePicker`
- `Flex`
- `NavLink`
- `Indicator`
- `Burger`
- `LoadingOverlay`
- `Grid`
- `Col`
- `ScrollArea`
- `PinInput`
- `CheckboxGroup`
- `AvatarGroup`
- `BadgeGroup`

## Hooks

- `useDisclosure`