Glizzy UI

Glizzy UI Logo

A shadcn/ui-inspired UI library for Gleam and Lustre

Hex VersionDocumentationLicense

What is Glizzy UI?

Glizzy UI is a comprehensive UI component library built for Gleam and Lustre. Inspired by shadcn/ui, it provides beautifully designed, accessible, and customizable components for building modern web applications.

Features

Quick Start

Installation

gleam add glizzy

Usage

import glizzy/ui/button
import lustre.{type Msg, element}
import lustre/element.{button, text}

fn view(msg: Msg) -> element(Msg) {
  button.button(
    ~{
      variant: button.Primary,
      size: button.Default,
      disabled: False,
      onclick: Some(Clicked),
    },
    [text("Click me!")],
  )
}

Components

Category Components
Core Button, Checkbox, Input, Radio, Select, Slider, Switch
Forms Calendar, Date Field, Date Picker, Number Field, Search Field, Text Field, Time Field
Layout Box, Cluster, Stack, Sequence, Centre, Aside, Divider, Separator
Navigation Breadcrumbs, Link, Menu, Tabs, Toolbar
Overlay Dialog, Modal, Popover, Tooltip, Disclosure
Data Display Avatar, Badge, Chip, KBD, Table, Tree
Feedback Alert, Meter, Progress Bar, Skeleton, Spinner, Toast
Selection Autocomplete, Checkbox Group, Combobox, Grid List, List Box, Radio Group, Tag Group, Toggle Button
Color Color Area, Color Field, Color Picker, Color Slider, Color Swatch, Color Wheel
Advanced Drop Zone, File Trigger, Virtualizer, Split Panel

Documentation

Examples

Check out the example application for a complete demo of all components.

cd examples/lustre_app
gleam run

Development

Build

gleam build

Test

gleam test

Format

gleam format

E2E Tests

bun install
bunx playwright test

License

MIT License - see LICENSE for details.

Acknowledgments