ALSA Design System

A comprehensive React component library and design system for building modern, accessible websites.

Installation

npm install alsa-ds

Or with yarn:

yarn add alsa-ds

Usage

Import CSS

First, import the CSS in your root layout or _app.tsx:

import 'alsa-ds/dist/index.css';

Basic components

import { Button, H1, Card } from 'alsa-ds';

function MyComponent() {
  return (
    <Card>
      <H1>Welcome</H1>
      <Button variant="primary">Get Started</Button>
    </Card>
  );
}

Layout components

import { Container, VStack, Box } from 'alsa-ds/layout';

function MyLayout() {
  return (
    <Container>
      <VStack gap="lg">
        <Box>Item one</Box>
        <Box>Item two</Box>
      </VStack>
    </Container>
  );
}

Navigation

import { Nav } from 'alsa-ds/navigation';

function Sidebar({ pathname }: { pathname: string }) {
  return (
    <Nav.Root layout="sidebar" surface="page" currentPath={pathname} gap="lg">
      <Nav.Section label="Getting started">
        <Nav.List>
          <Nav.Item href="/intro">Intro</Nav.Item>
          <Nav.Item href="/setup">Setup</Nav.Item>
        </Nav.List>
      </Nav.Section>
    </Nav.Root>
  );
}

Using Shell Components

import { Navbar, Footer } from 'alsa-ds/shells';

function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  );
}

Components

Typography

H1–H6, Body, Label

Actions

Button, IconButton, Clickable, TextLink, Nav, Tabs, SegmentedControl, SelectionCard, Kbd

Forms

Input, Textarea, Picker, Checkbox, Radio, Switch, FileUploader, DatePicker, DateRangePicker, Slider

Data display

Table, List, Listbox, ListboxItem

Charts

Sparkline, LineChart, BarChart, AreaChart, DonutChart

Layout

Container, VStack, HStack, Grid, Box, Card, Divider

Overlays

Modal, Drawer, Popover, Menu, CommandMenu, Tooltip

Feedback

Toast, Tag, Alert, Banner, Spinner, Progress, LoadingSkeleton, Badge

Media

Image, Avatar, Logo, Icon

Animations

CarouselAnimation, CountUp

Navigation

Breadcrumbs, Pagination, LanguageSelector, BackButton, HashScrollHandler

Shells

Navbar, Footer, PageBackground

Patterns

Dashboard, GridPatterns, CookieConsent, EndingCta, AnimatedSurfaces, Cards, Host, Toast

Development

# Install dependencies
npm install

# Run type checking
npm run type-check

# Run linting
npm run lint

# Build the package
npm run build

License

MIT © Alsa