@app-studio/web v0.9.11
App Studio Web Component Library
A comprehensive, accessible, and customizable React component library built with TypeScript and App Studio. This library provides a wide range of UI components designed to help you build beautiful and functional web applications quickly and efficiently.
Features
- 40+ UI Components: From basic elements to complex interactive components
- Fully Typed: Built with TypeScript for better developer experience
- Accessible: Follows WCAG guidelines for accessibility
- Customizable: Easily theme and style components to match your brand
- Responsive: Works across all device sizes
- Form Integration: Seamless integration with Formik for form handling
- Modern Design: Clean, consistent design following best practices
Installation
npm install @app-studio/web
# or
yarn add @app-studio/webQuick Start
import React from 'react';
import { Button, Text } from '@app-studio/web';
function App() {
return (
<div>
<Text>Hello, world!</Text>
<Button onClick={() => alert('Clicked!')}>Click me</Button>
</div>
);
}Component Categories
Layout Components
- View
- Center
- Horizontal
- Vertical
- AspectRatio
- Separator
- Resizable
Form Components
- Checkbox
- Radio
- Select
- Switch
- TextArea
- TextField
- OTPInput
Navigation Components
- Accordion
- Menubar
- NavigationMenu
- Pagination
- Sidebar
- Tabs
Feedback Components
- Alert
- Modal
- Toast
- Tooltip
Data Display Components
- Avatar
- Badge
- Card
- Table
- Chart
Utility Components
- Button
- Gradient
- Loader
- Text
Interactive Components
- Carousel
- ContextMenu
- DropdownMenu
- HoverCard
- Slider
- Toggle
- ToggleGroup
Design System
All components follow a consistent design system with:
- Typography: Inter/Geist font, specific sizes/weights
- Spacing: 4px grid system
- Colors: Neutral palette with semantic colors
- Rounded corners: Consistent border radius
- Transitions: Subtle animations
Development
Prerequisites
- Node.js (>= 10.x)
- npm or yarn
Setup
Clone the repository
git clone https://github.com/your-org/app-studio-web.git cd app-studio-webInstall dependencies
npm install # or yarnStart the development server
npm start # or yarn start
Available Scripts
npm start- Start the development servernpm run build- Build the library for productionnpm test- Run testsnpm run storybook- Start Storybook for component developmentnpm run lint- Run ESLintnpm run lint:fix- Fix ESLint issuesnpm run prettier- Run Prettiernpm run prettier:fix- Fix Prettier issues
Contributing
We welcome contributions! Please see our Contributing Guide for more details.
Creating New Components
Use our component creation script to scaffold new components:
npm run create-structure -- --name=YourComponentNameLicense
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgements
- Built with React
- Styled with App Studio
- Form handling with Formik
- State management with Zustand
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
7 months ago
9 months ago
7 months ago
9 months ago
9 months ago
7 months ago
7 months ago
10 months ago
7 months ago
10 months ago
7 months ago
9 months ago
7 months ago
9 months ago
10 months ago
10 months ago
12 months ago
11 months ago
11 months ago
1 year ago
12 months ago
12 months ago
11 months ago
1 year ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
7 months ago
1 year ago
7 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
7 months ago
7 months ago
7 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago