Glass UI — React Styled Components Library

Reusable React components built with styled-components and a glassmorphism-inspired design system.

Installation

npm install styled-components-project-idk

NPM package

Peer dependencies (not auto-installed):

• react >= 18
• react-dom >= 18
• styled-components >= 6

Quick start

Wrap your app with ThemeProvider and provide a theme matching the library tokens, then use components.

import { ThemeProvider } from 'styled-components';
import { Button, Text, Icon, Stack } from 'styled-components-project-idk';
// Optional deep-import themes if needed:
// import { lightTheme, darkTheme } from 'styled-components-project-idk/providers/theme';

const theme = /* lightTheme or your own compatible theme object */;

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Stack direction="vertical" gap={12}>
        <Text variant="h4">Hello</Text>
        <Button isPrimary onClick={() => {}}>Primary</Button>
        <Icon name="icon_search" size={20} />
      </Stack>
    </ThemeProvider>
  );
}

Theming

The library uses styled-components ThemeProvider. A compatible theme must include these tokens (shape simplified):

type Theme = {
  colors: {
    primary: { regular: string; highlight: string; bg: string; text?: string };
    secondary: { regular: string; highlight: string };
    textColor: { text_light: string };
    status: { error: string };
    glassBg: { primary: string; secondary: string; none?: string };
    text?: string;
  };
  fonts: { body: string };
  typography: {
    p: { size: string; weight: number };
    small: { size: string };
  };
  gradientPrimary?: { start: string; end: string };
  gradientSecondary?: { start: string; end: string };
};

You can also deep-import the provided themes (if published):

import {
  lightTheme,
  darkTheme,
} from "styled-components-project-idk/providers/theme";

Components

Top-level exports (importable from the package root):

• Button
• Icon
• IconText
• Text
• Card
• Calendar
• Stack, VStack, HStack, ScrollX, ScrollY
• Header (small)
• Checkbox, Radio, Switch, Eye
• Table, TableRow, TableCell
• IconInput, TextArea, Slider

Additional components (deep imports):

• Buttons: TextButton, GradientButton, IconButton
• Headers/Footers: HeaderLg, HeaderSmall, Footer
• Charts: Charts/chart, Charts/DonutChart
• Forms: forms/Register, forms/Login
• Inputs: Inputs/Input (form input), Input (floating label input)
• Card helpers: Card/UserInfo

Example deep import:

import GradientButton from "styled-components-project-idk/components/Buttons/GradientButton";

Icons

Use the Icon component with an IconName from the built-in set.

import { Icon } from "styled-components-project-idk";

export default () => <Icon name="icon_search" size={24} />;

To enumerate all available icons:

import { icons } from "styled-components-project-idk/assets/icons";
const names = Object.keys(icons); // IconName[]

Showcase

This repository includes a simple showcase page used during development.

• Run dev server: npm run dev
• Open the app and navigate to #showcase (hash route) to see all components.

Usage examples

Buttons:

import { Button } from "styled-components-project-idk";

<Button isPrimary onClick={() => {}}>
  Save
</Button>;

Inputs:

import { IconInput, TextArea, Slider } from 'styled-components-project-idk';

<IconInput icon="icon_search" placeholder="Search" />
<TextArea label="Description" rows={6} fullWidth />
<Slider min={0} max={100} defaultValue={40} onChange={() => {}} />

Table:

import { Table, TableRow, TableCell } from "styled-components-project-idk";

<Table caption="Users" maxWidth={800}>
  <thead>
    <TableRow>
      <TableCell header>Name</TableCell>
      <TableCell header>Email</TableCell>
      <TableCell header>Role</TableCell>
    </TableRow>
  </thead>
  <tbody>
    <TableRow>
      <TableCell>Jane</TableCell>
      <TableCell>[email protected]</TableCell>
      <TableCell>Admin</TableCell>
    </TableRow>
  </tbody>
</Table>;

Development

Commands:

• npm run dev — start Vite dev server
• npm run build — type-check and build library to dist/
• npm run preview — preview build
• npm run lint — run ESLint

Publishing note: The package ships dist/ only. Deep imports assume the compiled structure mirrors src/.

License

ISC — see LICENSE if present.